jQuery-如何将一些可选的div向左移动，单击按钮

Question

我有一些div，可以单击它。然后，我有两个按钮，此按钮的目的是当我选择某个div并单击左按钮时，div左移至20px。 反向过程的右键。 我的要求是1.选择后，当我单击鼠标左键时div向左移动20px（现在可以正常工作）2.在第二次单击时，div移至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 个解决方案

解决方案1
3 2016-07-02 06:41:53

解决方案2
2 2016-07-02 07:01:32

解决方案3
1 2016-07-02 06:34:22

jQuery-如何将一些可选的div向左移动，单击按钮

问题描述

3 个解决方案

解决方案1 3 2016-07-02 06:41:53

解决方案2 2 2016-07-02 07:01:32

解决方案3 1 2016-07-02 06:34:22

解决方案1
3 2016-07-02 06:41:53

解决方案2
2 2016-07-02 07:01:32

解决方案3
1 2016-07-02 06:34:22