代碼選擇了錯誤的元素來制作動畫

Question

我正在嘗試讓我的jquery根據存儲在點擊元素屬性中的值來選擇不同的元素。 但它保持了點擊元素的動畫效果。 因為有多個名為element1的類，我認為這是設置與該按鈕關聯的指定div的最簡單方法。

$(".element1").click(function(){
    var expander = $(this).attr("id");
    var expander2 = '#' + expander;
    test(expander2);


});

function test(expander3) {
    if (toggle == true) {
        $(expander3).animate({height:200}, {queue:false}, "slow");
        $(expander3).animate({width:400}, {queue:false}, "slow");
        toggle = false;
    } else if (toggle == false) {
        $(expander3).animate({height:0}, {queue:false}, "slow");
        $(expander3).animate({width:50}, {queue:false}, "slow");
        toggle = true;
    }
}

我做了警告（expandder2），我得到了正確的id（即＃id1，＃id2等等），但它只是動畫.element1，.element2等等。這就像它忽略了正確的id。

這是html看起來如何有用：

<input type="button" id="id1" class="element1" value="TextGoesHere"></input>

<div id="id1">
    This should be animating.
</div>

Answer 1

您的html無效： id屬性應該是唯一的。 當您嘗試使用$("#idThatIsNotUnique")通過id進行選擇時，它將只找到具有該id的第一個元素（或者可能是某些瀏覽器中的最后一個元素） - 在您的情況下是輸入，而不是div。

您可以使用html5 data-屬性：

  <input type="button" data-animate-id="id1" class="element1" value="TextGoesHere"></input>

  <div id="id1">This should be animating.</div>

然后是JS：

        $(".element1").click(function(){
            var expander = $(this).attr("data-animate-id");
            var expander2 = '#' + expander;
            test(expander2);
        });