jquery onclick add margin-left

3phpmpom 于 2023-06-22 发布在 jQuery

关注(0)|答案(7)|浏览(126)

我在JS中尝试一些非常简单的东西，但我不能让它工作。
我想当点击一个div添加一个负的margin-left到另一个div，但我希望它发生在每次我点击div，而不仅仅是一次，因为它现在。每次单击我的#next_nav时，我都希望#nav从-10px移动。在这里，它只工作一次。以下是我的JS：

$(function() {
  $('#next_nav').click(function() {
    $("#nav").css('margin-left', '-10px');
  });
});

我的HTML：

<div id="next_nav"></div>
<div id="nav"></div>

以下是我的JSFiddle：http://jsfiddle.net/Beyzd/
有人能帮我吗？

jquery

来源：https://stackoverflow.com/questions/22146904/jquery-onclick-add-margin-left

7条答案

按热度按时间

ddhy6vgd1#

在你的值前面加上一个=：

$(function() {
    $('#next_nav').click(function() {
       $('#nav').css('margin-left', '-=10px');
    });
});

Working Fiddle
编辑

如果你想动画它，使用animate()方法。这里有一个fiddle给你。

赞(0）回复(0）举报 2023-06-22

f0ofjuux2#

你可以试试这个

var pixels=0;
$(function() {
    $('#next_nav').click(function () {
       pixels=pixels-10;      
       $( "#nav" ).css('margin-left',pixels);
    });
});

Working fiddle is available here.

赞(0）回复(0）举报 2023-06-22

sy5wg1nm3#

检查jsFiddle

$(document).ready(function (){
       $("#next_nav").on("click", function() {
          var $left = $("#nav").css('margin-left');
          var $newval = (parseInt($left) - 10) + "px";
          $("#nav").css ({
            'margin-left' : $newval
          });
       });
   });

赞(0）回复(0）举报 2023-06-22

agyaoht74#

为您修复：Updated version
将.css('margin-left','-10px');编辑为.css({'margin-left' : '-10px'});

赞(0）回复(0）举报 2023-06-22

rfbsl7qr5#

试试这个：

$(function() {
$('#next_nav').click(function () {
  marginleft=parseInt($( "#nav" ).css('margin-left').replace('px',''));
  $( "#nav" ).css('margin-left',marginleft-10+'px');
});
});

Working Fiddle

赞(0）回复(0）举报 2023-06-22

igetnqfo6#

只需要改变这个$( "#nav" ).css('margin-left','-=10px');

赞(0）回复(0）举报 2023-06-22

oewdyzsn7#

$(function() {
  var count=0;
  $('#next_nav').click(function () {
  count-=10;

$( "#nav" ).css('margin-left',count);
});
});

包括jQuery

赞(0）回复(0）举报 2023-06-22

我来回答

jquery onclick add margin-left

7条答案

相关问题

热门标签

最新问答