對多個元素使用相同的單擊功能（jQuery）

Question

嗨，我在讓以下內容正常工作方面遇到了麻煩。 只有第一個要素有效，我應該怎么看？

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

Answer 1

對多個元素使用相同的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> 

Answer 2

第一件事，第一id屬性應該是ONCE每頁

只需說一下，您需要做的就是通過document的on功能並以類似選擇器的方式進行操作

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