如何選擇與特定的類此屬性 - jQuery的

我有jQuery的，看起來像：如何選擇與特定的類此屬性 - jQuery的

jQuery(document).ready(function($){ 
    $(".lmls").click(function(){ 
     var groupid = $('span#gid').attr('value'); 
     $("#otherpaths"+groupid).toggle(); 
     // alert(groupid); 
    }); 
}

我想基於類.lmls顯示/隱藏：

<div class="lmls"> 
    <img src="img/pathway_icon.png" align="center" width="40px" height="40px"> Leads to other pathways 
    </div> 

<div class="otherpaths" id="otherpaths5" style=""> 
    <span style="display: none;" id="gid" value="5"></span> 
     <div class="grouppath" id="grouppath1"> 
     <a href="path1.php">Link1</a> </div> 
     <div class="grouppath" id="grouppath2"> 
      <a href="path2.php">Link2</a> 
     </div> 
     <div class="grouppath" id="grouppath3"> 
      <a href="path3" target="_blank">Link3</a> 
     </div> 
</div> 

    <div class="lmls"> 
    <img src="img/pathway_icon.png" align="center" width="40px" height="40px"> Leads to other pathways 
    </div> 

<div class="otherpaths" id="otherpaths6" style=""> 
    <span style="display: none;" id="gid" value="6"></span> 
     <div class="grouppath" id="grouppath1"> 
     <a href="path1.php">Link1</a> </div> 
     <div class="grouppath" id="grouppath2"> 
      <a href="path2.php">Link2</a> 
     </div> 
     <div class="grouppath" id="grouppath3"> 
      <a href="path3" target="_blank">Link3</a> 
     </div> 
</div>

這按照每個.otherpaths中包含的span標籤的值運作。這些值在單個頁面中重複多次。

的問題是，當我點擊我的.lmls類之一它並不顯示/隱藏右.lmls類，它只是顯示第 - 因爲我的我的js的第二行只是尋找.lmls，和.lmls在同一頁面中多次出現。

我該如何做到這一點？

謝謝。

來源

2015-01-20 CodeTalk

您是否在頁面中複製了ID？ – j08691 2015-01-20 19:34:21

請參閱上面的進一步意見。 – CodeTalk 2015-01-20 19:34:43

請添加一個代碼片段。 – bwitkowicz 2015-01-20 19:36:07

你能做到這樣

$(document).ready(function() { 
 
    $('.lmls').on('click', function() { 
 
    $(this).next(".otherpaths").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="lmls"> 
 
    <img src="img/pathway_icon.png" align="center" width="40px" height="40px"> Leads to other pathways 
 
</div> 
 

 
<div class="otherpaths" id="otherpaths5" style=""> 
 
    <span style="display: none;" id="gid" value="5"></span> 
 
    <div class="grouppath" id="grouppath1"> 
 
    <a href="path1.php">Link1</a> </div> 
 
    <div class="grouppath" id="grouppath2"> 
 
    <a href="path2.php">Link2</a> 
 
    </div> 
 
    <div class="grouppath" id="grouppath3"> 
 
    <a href="path3" target="_blank">Link3</a> 
 
    </div> 
 
</div> 
 

 
<div class="lmls"> 
 
    <img src="img/pathway_icon.png" align="center" width="40px" height="40px"> Leads to other pathways 
 
</div> 
 

 
<div class="otherpaths" id="otherpaths6" style=""> 
 
    <span style="display: none;" id="gid" value="6"></span> 
 
    <div class="grouppath" id="grouppath1"> 
 
    <a href="path1.php">Link1</a> </div> 
 
    <div class="grouppath" id="grouppath2"> 
 
    <a href="path2.php">Link2</a> 
 
    </div> 
 
    <div class="grouppath" id="grouppath3"> 
 
    <a href="path3" target="_blank">Link3</a> 
 
    </div> 
 
</div>

，或者如果你是開放的改變你的HTML的結構位：

$(document).ready(function() { 
 
    $('.lmls').on('click', function(){ 
 
    $(this).closest('.section').find('.otherpaths').toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="section"> 
 
    <div class="lmls"> 
 
    <img src="img/pathway_icon.png" align="center" width="40px" height="40px"> Leads to other pathways 
 
    </div> 
 

 
    <div class="otherpaths" id="otherpaths5" style="display:none;"> 
 
    <span style="display: none;" id="gid" value="5"></span> 
 
    <div class="grouppath" id="grouppath1"> 
 
     <a href="path1.php">Link1</a> </div> 
 
    <div class="grouppath" id="grouppath2"> 
 
     <a href="path2.php">Link2</a> 
 
    </div> 
 
    <div class="grouppath" id="grouppath3"> 
 
     <a href="path3" target="_blank">Link3</a> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="section"> 
 
    <div class="lmls"> 
 
    <img src="img/pathway_icon.png" align="center" width="40px" height="40px"> Leads to other pathways 
 
    </div> 
 

 
    <div class="otherpaths" id="otherpaths5" style="display:none;"> 
 
    <span style="display: none;" id="gid" value="5"></span> 
 
    <div class="grouppath" id="grouppath1"> 
 
     <a href="path1.php">Link1</a> </div> 
 
    <div class="grouppath" id="grouppath2"> 
 
     <a href="path2.php">Link2</a> 
 
    </div> 
 
    <div class="grouppath" id="grouppath3"> 
 
     <a href="path3" target="_blank">Link3</a> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-01-20 19:39:16 indubitablee

這不起作用 – CodeTalk 2015-01-20 19:44:20

@CodeTalk您使用的是什麼版本的jQuery – indubitablee 2015-01-20 19:45:20

即時通訊使用jquery 1.11 – CodeTalk 2015-01-20 19:47:16

試試這個：

$(".lmls").click(function(){ 
    $(this).find('.otherpaths').toggle(); 
});

當然，當文檔準備好了！

看看JsFiddle。

來源

2015-01-20 19:48:54 charliebrownie

如何選擇與特定的類此屬性 - jQuery的

回答

相關問題