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。< / p>

以下是html看起来如何有用：

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

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

Answer 1

您的HTML无效：id属性应该是唯一的。当您尝试id选择$("#idThatIsNotUnique")时，它会找到第一个元素（或某些浏览器中可能是最后一个元素）的id - 在您的情况下是输入，而不是格。

您可以改为使用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);
        });

代码选择了错误的元素来制作动画

1 个答案: