定位所有课程,只选择点击的元素

时间:2015-10-09 07:41:04

标签: javascript jquery this

我昨天发布了一个问题,然后删除了它,以为我认为这部分代码没有任何问题。但是,经过测试,仍然存在问题。

在下面的代码中,我希望$(this)仅选择 所点击的元素,而不是我所定位的所有类。但是,控制台记录2,3,4等...而不是1!

基本上我需要将类“action”添加到被点击的元素中。感谢任何帮助!

$("body").on("mousedown", ".moveable", function(e){
    var clickX = mouseX;
    var clickY = mouseY;

    $(this).addClass("action");
    console.log($(".action").length);

    inX = clickX - $(".action").position().left;
    inY = clickY - $(".action").position().top;

    timeout = setInterval(function(){

        $(".action").css("left", clickX + (mouseX - clickX) - inX);
        $(".action").css("top", clickY + (mouseY - clickY) - inY);

    }, 10);

    return false; 

});

我知道我可以使用$(".moveable").on("mousedown", function() {...});$(this)然后只使用“可移动”类定位被点击的元素,但我需要事件来触发动态添加的元素,因此我将事件绑定在我是这样的。也许我这样做的方式就是问题?

我希望你能帮忙!

麦克

2 个答案:

答案 0 :(得分:2)

我认为你需要的是从其他元素中删除动作类,如下所示。另请注意缓存jQuery选择器,这样您就不必一直运行选择器。

如果要移除动作类,则还需要删除这些元素的间隔。

$("body").on("mousedown", ".moveable", function (e) {
    var clickX = mouseX;
    var clickY = mouseY;

    $('.action').removeClass('action').each(function () {
        //clear other element's interval also
        clearInterval($(this).data('moveable-timer'));
    });
    var $action = $(this).addClass("action");
    console.log($action.length);

    var position = $action.position();
    inX = clickX - position.left;
    inY = clickY - position.top;

    var timeout = setInterval(function () {

        $action.css("left", clickX + (mouseX - clickX) - inX);
        $action.css("top", clickY + (mouseY - clickY) - inY);

    }, 10);
    $action.data('moveable-timer', timeout);

    return false;

});

答案 1 :(得分:0)

在您的代码中,您始终定位正在创建问题的.action类。用户$(this),仅定位当前元素。 试试这个:

$("body").on("mousedown", ".moveable", function(e){
    var clickX = mouseX;
    var clickY = mouseY;

    var $el = $(this);
    $el.addClass("action");

    inX = clickX - $el.position().left;
    inY = clickY - $el.position().top;

    timeout = setInterval(function(){

        $el.css("left", clickX + (mouseX - clickX) - inX);
        $el.css("top", clickY + (mouseY - clickY) - inY);

    }, 10);

    return false; 

});