Question

我的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>

这适用于每个span中包含的.otherpaths标记的值。这些值在一个页面中重复多次。

问题是，当我点击其中一个.lmls课程时，它没有显示/隐藏正确的.lmls课程，它只显示第一个 - 因为我的第二行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。

如何使用特定的类选择此属性 - jquery

2 个答案: