Question

我有一些div可以选择点击它。然后我有两个按钮这个按钮的目的是当我选择一些div并单击左按钮时div向左移动到20px。反向过程的右键。我的要求是 1.选择当我点击左键时，div移动到20px左侧（这就是现在正常工作） 2.第二次点击它移动到40px（意味着从当前位置20px）我怎么能这样做？

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
    <meta charset="utf-8" />
    <title></title>
    
    <style>
        div{
            background-color:yellow;
            margin-top:20px;
        }
        div {

}
.selected {
  background: green;
}
    </style>
</head>
<body>
    <button id="key">left</button>
    <button id="key1">right</button>

    
    <div class='toGrab'>grand parent</div>
    <div class='toGrab'>parent</div>
    <div class='toGrab'>child</div>
    <div class='toGrab'>child</div>
    <div class='toGrab'>child</div>

Answer 1

也许这有助于你

改进版本

将元素从他

的位置移动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');
});

Answer 2

试试这个，

$(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"
      });
   });
});

Answer 3

保留变量

(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');
    });
})($);

Jquery - 如何将一些可选div移动到左侧，单击按钮

3 个答案: