Javascript 存在类的多个项时的Jquery目标

我有以下代码：

$(function () {
        var target = $('span.slider') //can I make the variable apply to the target span?

        target.mousedown(function() { 
              sliding = true 
        })
        $(document).mouseup(function() {
             sliding = false 
        })
        $(document).mousemove(function(e) { 
            if(sliding){ 
              target.css('left', e.pageX) //do I isolate here?
            }
        })  
    })

---

在我的html中有四个“span.slider”。如何修改此jquery，使其功能仅适用于目标span.slider？上面的代码移动了所有四个跨度，我完全理解为什么会这样。我无法将其定位到用户希望移动的范围。

尝试向其添加一个类，然后对照该类进行检查

    target.mousedown(function() { 
          sliding = true;
          $(this).addClass('sliding'); 
    })
    $(document).mouseup(function() {
         sliding = false; 
          target.removeClass('sliding'); 
    })
    $(document).mousemove(function(e) { 
        if(sliding){ 
          target.filter('.sliding').css('left', e.pageX) //do I isolate here?
        }
    })  

---

尝试向其中添加一个类，然后对照该类进行检查

    target.mousedown(function() { 
          sliding = true;
          $(this).addClass('sliding'); 
    })
    $(document).mouseup(function() {
         sliding = false; 
          target.removeClass('sliding'); 
    })
    $(document).mousemove(function(e) { 
        if(sliding){ 
          target.filter('.sliding').css('left', e.pageX) //do I isolate here?
        }
    })  

试试这个：

$(function() {
    var target = $('span.slider'); //can I make the variable apply to the target span?
    var targetToMove;
    target.mousedown(function() {
        sliding = true;
        targetToMove = $(this);
    });
    $(document).mouseup(function() {
        sliding = false;
    });
    $(document).mousemove(function(e) {
        if (sliding) {
            targetToMove.css('left', e.pageX); //do I isolate here?
        }
    });
})​;​

试试这个：

$(function() {
    var target = $('span.slider'); //can I make the variable apply to the target span?
    var targetToMove;
    target.mousedown(function() {
        sliding = true;
        targetToMove = $(this);
    });
    $(document).mouseup(function() {
        sliding = false;
    });
    $(document).mousemove(function(e) {
        if (sliding) {
            targetToMove.css('left', e.pageX); //do I isolate here?
        }
    });
})​;​

---

您可以按如下方式每次绑定和解除绑定鼠标移动

$(function() {
  var target = $('span.slider');
  target.on('mousedown', function(e) {
    var $el = $(this)
    $(document).mousemove(function(e) {
      $el.css('left', e.pageX) 
    })
  }).on('mouseup', function() {
    $(document).off('mousemove');
  })

})

---

您可以按如下方式每次绑定和解除绑定鼠标移动

$(function() {
  var target = $('span.slider');
  target.on('mousedown', function(e) {
    var $el = $(this)
    $(document).mousemove(function(e) {
      $el.css('left', e.pageX) 
    })
  }).on('mouseup', function() {
    $(document).off('mousemove');
  })

})

---

杰出的完美…现在继续完善我自制的表单滑条的其余部分…我觉得在我开始插件路线之前，我需要自己能够做到这一点：）太棒了。完美…现在继续完善我自制的表单滑块的其余部分…我觉得我需要在开始插件路线之前自己完成这项工作：）@musa

$（文档）

中的

这个

有一个小问题。。。可能是

$（“滑动”）。在
$（文档）
中删除此
的
@musa小问题。。。可能是
$（“滑动”）。删除…