如何 select 此属性具有特定 class - jquery

Question

我有 jquery 看起来像：

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

我正在尝试 show/hide 基于 class .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 classes 之一时，它 show/hide 不正确 .lmls class ，它只显示第一个 - 因为我的 js 的第二行只是在寻找 .lmls，并且 .lmls 在同一页面中出现多次。

我怎样才能做到这一点？

谢谢。

Answer 1

你可以这样做

$(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>

Answer 2

试试这个：

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

当然，当文档准备好时！

看看JsFiddle。

如何 select 此属性具有特定 class - jquery

How to select this attribute with a specific class - jquery

jquery

selection