对多个元素使用相同的单击函数(Jquery)

时间:2016-04-06 14:17:18

标签: javascript jquery html css

嗨,我有以下工作的麻烦。只有第一个元素有效,我该怎么想?

<div class="hi">
    <a id="tabBtn" href="javascript:void(0)"></a>
</div>
<div class="hi">
    <a id="tabBtn" href="javascript:void(0)"></a>
</div>
<div class="hi">
    <a id="tabBtn" href="javascript:void(0)"></a>
</div>

<script>
    $('#tabBtn').on("click",function(){
        if ($(this).parent('.hi').css('max-height') == '65px'){
            $(this).parent(".hi").addClass('open');
        }
        else{
            $(this).parent(".hi").removeClass('open');
        }
    })
</script>

2 个答案:

答案 0 :(得分:3)

对多个元素使用相同的id无效,请改用class

    $('.tabBtn').on("click", function() {
      if ($(this).parent('.job').css('max-height') == '65px') {
        $(this).parent(".job").addClass('open');
      } else {
        $(this).parent(".job").removeClass('open');
      }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hi">
  <a class="tabBtn" href="javascript:void(0)">Hello</a>
</div>
<div class="hi">
  <a class="tabBtn" href="javascript:void(0)">Hello2</a>
</div>
<div class="hi">
  <a class="tabBtn" href="javascript:void(0)">Hello3</a>
</div>

答案 1 :(得分:1)

第一件事id属性应该是每页 ONCE

要说你需要做的就是使用on中的document函数并按照这样的选择方式工作

$(document).on("click",".tabBtn",function(){
  //do work
})