Javascript Jquery如何将一些可选择的div移到左侧，单击一个按钮

我有一些div，点击它可以选择。然后我有两个按钮，这个按钮的目的是当我选择一些div，点击左按钮，div向左移动到20px。右键用于反向过程。 我的要求是 1.选择“当我单击左键时”按钮后，div移到现在工作的20px左侧 2.第二次单击时，它将从当前位置移动到40px，即20px 我该怎么做

$key.clickfunction我的函数{ $div.toGrab.csspading-left； $div.selected.csspading-left，“20px”； }; $key1.clickfunction我的函数{ $div.toGrab.csspading-left； $div.selected.csspading-left，“0px”； }; $div.toGrab.onclick，函数{ $this.toggleClass'selected'； }; div{ 背景颜色：黄色； 边缘顶部：20px； } div{ } .选定{ 背景：绿色； } 左边 正当 祖父母 父母亲 小孩 小孩 child保留一个变量

(function($)){



    $("#key").click(function myfunction() {
        var position= parseInt($("div.toGrab").css("padding-left"));
        position+=20;
        $("div.toGrab").css("padding-left", '');
        $("div.selected").css("padding-left", position+'px');
    });
    $("#key1").click(function myfunction() {
         var position= parseInt($("div.toGrab").css("padding-left"));
        position -=20;
        $("div.toGrab").css("padding-left", '');
        $("div.selected").css("padding-left", position+'px');
    });
    $("div.toGrab").on("click", function () {
        $(this).toggleClass('selected');
    });
})($);

保留一个变量

(function($)){



    $("#key").click(function myfunction() {
        var position= parseInt($("div.toGrab").css("padding-left"));
        position+=20;
        $("div.toGrab").css("padding-left", '');
        $("div.selected").css("padding-left", position+'px');
    });
    $("#key1").click(function myfunction() {
         var position= parseInt($("div.toGrab").css("padding-left"));
        position -=20;
        $("div.toGrab").css("padding-left", '');
        $("div.selected").css("padding-left", position+'px');
    });
    $("div.toGrab").on("click", function () {
        $(this).toggleClass('selected');
    });
})($);

也许这对你有帮助

改进版

将元素从其所在位置移动20个像素

function positioningSelectedItems(obj){
    var negative = obj.negative || false;
    var padding = obj.padding || 20;
    $("div.selected").each(function (key,val) {
        if(!negative)
            var spad = parseFloat($(val).css("padding-left"))+padding;
        else
            var spad = parseFloat($(val).css("padding-left"))-padding;
        $(val).css("padding-left", spad+'px')
    });
}

$("#key").click(function myfunction() {
    positioningSelectedItems({negative:false});
});
$("#key1").click(function myfunction() {
    positioningSelectedItems({negative:true});
});
$("div.toGrab").on("click", function () {
    $(this).toggleClass('selected');
});

也许这对你有帮助

改进版

将元素从其所在位置移动20个像素

function positioningSelectedItems(obj){
    var negative = obj.negative || false;
    var padding = obj.padding || 20;
    $("div.selected").each(function (key,val) {
        if(!negative)
            var spad = parseFloat($(val).css("padding-left"))+padding;
        else
            var spad = parseFloat($(val).css("padding-left"))-padding;
        $(val).css("padding-left", spad+'px')
    });
}

$("#key").click(function myfunction() {
    positioningSelectedItems({negative:false});
});
$("#key1").click(function myfunction() {
    positioningSelectedItems({negative:true});
});
$("div.toGrab").on("click", function () {
    $(this).toggleClass('selected');
});

试试这个

$(document).ready(function(){
$(".toGrab").on("click", function () {
      $(this).toggleClass('selected');
});
$("#key").click(function(){
var sl = parseInt($(".selected").css("padding-left"));
$(".selected").css({
      paddingLeft : "+="+"20"
});
if(sl >= '100'){
      $(".selected").css({
      paddingLeft : 100
});
}
});
$("#key1").click(function(){
    $(".selected").css({
      paddingLeft : "-="+"20"
      });
   });
});

试试这个

$(document).ready(function(){
$(".toGrab").on("click", function () {
      $(this).toggleClass('selected');
});
$("#key").click(function(){
var sl = parseInt($(".selected").css("padding-left"));
$(".selected").css({
      paddingLeft : "+="+"20"
});
if(sl >= '100'){
      $(".selected").css({
      paddingLeft : 100
});
}
});
$("#key1").click(function(){
    $(".selected").css({
      paddingLeft : "-="+"20"
      });
   });
});

---

---

现在它正在工作，但未选择的div在第二次单击时返回到第一个位置。我如何解决此问题现在尝试如果你可以提供小提琴，它将是GR8现在它正在工作，但未选择的div在第二次单击时返回到第一个位置。我如何解决此问题现在尝试如果你可以提供小提琴，它将是GR8它正在工作，但联合国第二次单击返回第一个位置。如何解决此问题我改进了我的答案，请检查它是否工作，但第二次单击返回第一个位置。如何解决此问题我改进了我的答案，请检查此代码对我更有用，有人会想，当位置达到60px时，我如何停止这个函数？@aswathy check updated code，还有其他方法，它会在单击时停止某些事件，并将其更新。这很完美，但当我将最大左值更改为60以上时，为什么它不工作？如果将>=60值更改为80，将paddinLeft更改为80，它会停止或将你的停止位置设置为80。是的，我也会更改padding left>=80和padding left:80，但它不工作。该代码对我更有用，人们会想，当位置达到60px时，我如何停止该功能？@aswathy检查更新的代码，还有一些其他方法，它会在单击时停止某些事件，并将更新该代码。太完美了，但是，当我将“左最大值”更改为60以上时，为什么它不起作用呢？如果将>=60值更改为80，将paddingleft更改为80，它将停止或将“停止位置”设置为80。是的，我也将paddingleft>=80和paddingleft:80更改为paddingleft:80，但它不起作用