javascript - Jquery-如何在单击按钮时将一些可选择的 div 移到左侧

标签 javascript jquery

我有一些 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>

最佳答案

也许这对你有帮助

改进版

将元素从他所在的位置移动 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');
});

关于javascript - Jquery-如何在单击按钮时将一些可选择的 div 移到左侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38157218/

相关文章:

c# - 像实时新闻提要ajax刷新一样实现facebook?

javascript - express 接收空物体

javascript - Highcharts:如何使用 setData 添加系列

javascript - jQuery:隐藏包含 ul + print 的子 td 的 tr?

php - 使用 jquery ajax 通过 GET 更新动态创建的图像

Javascript 未加载到内部 thymeleaf 链接

javascript - React路由器打不开404未找到页面

javascript - 如何删除 jQuery 中的实时提交事件?

jquery - 获取单选按钮的文本而不是值

Jquery如果输入为空则添加值并提交