Question

我是jQuery的新手，但我理解基本语法。虽然我搜索和搜索过，但我找不到的是如何使一个功能能够不止一次发射。这是我的jsFiddle代码的链接。

    $( "div" ).on( "click", function() {
    $( this ).css("transform", "translate(50px,0px)");
    });

在这段代码中，我基本上告诉div在点击时向右移动50px，但是如果点击再次点击一次则没有任何反应。我怎样才能使它再次点击时再次触发该功能？

免责声明：对不起，如果这是一个愚蠢的问题，就像我之前说过的那样，我是jQuery的新手。

感谢所有帮助过我的人，我真的很感激。谢谢！

Answer 1

你的代码告诉div去0,0左边50px。无论你点击多少，它都会把它放在同一个地方。

您必须将当前的左侧位置增加50。

试试这个：

$( "div" ).on( "click", function() {
    var pos = $(this).position();
    var left = pos.left + 50;

  $( this ).css("transform", "translate("+left+"px,0px)");
});

Answer 2

你的javascript是正确的，它不止一次。 div不移动的原因是因为它已经处于你试图移动它的位置。

你并没有告诉它将50px移动到其当前位置的右侧，而是将50px移动到其原始位置的右侧。由于它在第一次印刷后已经存在，所以它不会移动。

示例解决方案：

(function(){ //this is only neccessary so that pos doesn't have to be global variable
    var pos = 0;
    $( "div" ).on( "click", function() {
        pos+=50;
        $( this ).css("transform", "translate("+pos+"px,0px)");
    });
})();

Answer 3

在这里，您可以看到每次点击都会获得偏移，然后添加50。

$("div").on("click", function () {
    var offsetL = $(this).position().left;
    $(this).css("transform", "translate(" + (offsetL + 50) + "px,0px)");
});

小提琴：http://jsfiddle.net/oLu6ysod/8/

Answer 4

测试此代码

var transform = 0 ;
$( "div" ).click(function() {
$( this ).css("transform", "translate("+transform+"px,0px)");
   transform+=50;
});

每次点击元素时都应该更新位置

jQuery-如何使我的函数能够多次触发？

4 个答案: