寫點擊事件動態jQuery的

這裏是原始的HTML寫點擊事件動態jQuery的

<div class='cl_{{ $gen }}'>{{$gen->name}}</div> 
<div class='jl_{{ $var }}'>{{$gen->name}}</div>

循環在這裏後，我得到了作爲輸出的HTML

我想，如果我在類cl_x點擊做，那麼jl_x應該是可見的，其他應該是隱藏的，默認情況下，第一個cl_1應該是可見的。我怎樣才能做到這一點？

<div class='cl_1'>One</div> 
<div class='cl_5'>Two</div> 
<div class='cl_6'>Three</div> 
<br> 
<div class='jl_1'>Alpha</div> 
<div class='jl_1'>Andrew</div> 
<div class='jl_1'>Christ</div> 
<div class='jl_5'>Anto</div> 
<div class='jl_5'>Brito</div> 
<div class='jl_6'>Oyster</div> 
<div class='jl_6'>Beta</div>

注：所有1,5,6都不是標準的，因爲它們是從數據庫中來。

我真的無法想象如何實現這一目標。幫助請

但這裏是我已經嘗試了邏輯

裏面的文件準備
遍歷像HTML jQuery的
寫click事件顯示隱藏，如果他們依序按上CL_ *
觸發首次發生的點擊事件。

不要擔心生成的HTML，但需要的是動態地寫了jQuery事件或別的東西

但不能能夠實現代碼請幫助

腳本：

$(document).ready(function() { 
//not sure whether i should loop over the jquery itself or write anything like the element starts with cl-* like that 
});

更新：

這裏爲t他Fiddle我到目前爲止

來源

2016-01-27 Biz Dev B

會唯一標識符移動到不同的屬性，並添加一個公共類所有J組

<div class='cl' data-gen="{{ $gen }}">{{$gen->name}}</div> 
<div class='jl jl_{{ $var }}'>{{$gen->name}}</div>

$(document).on('click','.cl',function(){ 
    $('.jl').hide().filter('.jl_' + $(this).data('gen')).show(); 
})

來源

2016-01-27 02:03:03 charlietfl

謝謝，默認情況下所有類的'jl'都應該隱藏？ –

是啊..通常更好的與CSS ...不必等待腳本準備好 – charlietfl

謝謝我創建了小提琴，我可以知道如何觸發第一個CL_ *默認情況下？ https://jsfiddle.net/aaaf6us4/7/ –

爲所有的html添加一個基礎「jl」類，它包含任何帶有「jl_ *」的任何東西，以便您可以訪問具有「jl」類的所有內容，然後將其隱藏或不隱藏，像這樣：

HTML：

<div class='cl {{ $gen }}'>{{$gen->name}}</div> 
<div class='jl {{ $var }}'>{{$gen->name}}</div>

JS：

$(document).on('click', '.cl', function(e){ 
    var classes = ($(e.target).attr("class").split(' ')); 
    $('.jl').toggleClass("hide"); 
    $('.jl' + "."+ classes[1]).toggleClass("hide"); 
});

風格：

.hide{ 
display: none; 
}

https://jsfiddle.net/rc368gjp/

來源

2016-01-27 02:00:48 RichG

你能請更新這個小提琴PLS .. HTTPS： //jsfiddle.net/aaaf6us4/ –

分叉小提琴並更新它：https://jsfiddle.net/rc368gjp/ – RichG

你不是真的想用類這一點 - 一個自定義的數據屬性是有道理的，但。像<div class="cl" data-number="{{ $gen }}">與<div class="jl" data-number="{{$var}}">上的其他元素。

然後裏面的$(document).ready(...)你可以這樣做：

$('.jl').hide().first().show(); 
$('.cl').click(function(){ 
    $('.jl').hide().filter('[data-number="' + $(this).data('number') + '"]').show(); 
})

這也將是很好的彌補了「瘦肉精」和「JL」更有意義的名稱 - 類一般應語義。

來源

2016-01-27 02:01:17

謝謝。你可以在這個小提琴上更新這個https://jsfiddle.net/aaaf6us4/ –

寫點擊事件動態jQuery的

回答

相關問題