如何使用jQuery根据CSS中元素的margin-left值隐藏一个元素？

Question

我正在开发一个走马灯样式的轮播器，并希望在

左边距等于-3480px时隐藏其中一个控制器。这是我的代码：

$(function(){
    if($("ul#listName").css("margin-left") == "-3480px"){
      $(".nextButton").hide();
    }    
});

但它并没有执行任何操作，我不确定接下来该怎么办。有人能提供指导或建议吗？

- Andy Smith

---

使用jQuery UI，不要重复发明轮子！ ;) - Mild Fuzz

另外，设置一个JS Fiddle，这样我们可以更清楚地看到您正在尝试什么。 - Mild Fuzz

jQuery中的.css()方法返回与查询匹配的第一个元素。 "ul#listName"有多个匹配吗？ - aaroncatlin

@MildFuzz 我很想使用jQuery UI，但这是一个非常奇怪的旋转木马实现，不适用于Web。 - Andy Smith

我已经尝试了你的代码，它可以工作（当然使用了不同的选择器）。你有检查过列表是否获得了那个边距吗？也许它没有得到确切的数字，请尝试使用Firebug（或类似工具）进行检查。 - Cmorales

Answer 1

var mm = $("ul#listName").css("margin-left");
if(mm == -3480+"px"){
  $(".nextButton").hide();
}

- t q

Answer 2

var leftMargin = parseInt($('ul#listName').css('margin-left'), 10);
if (leftMargin == -3480){
  $('.nextButton').hide();
}

我使用了parseInt来展示一种替代方案，避免在后缀为px时出现任何问题。

- Brad Christie

Answer 3

var p = $(".your_class");
var position = p.position();
  if(p.position().left == '-3480px'){
$(".nextButton").hide();
}

- Crsr

---

position 返回一个数字对象。 - pimvdb

是的，如果您使用position().left，则返回左侧位置 :) 已测试并在两个滑块中使用。 - Crsr

Answer 4

根据你正在执行动画的样式属性来检查。另外，在比较之前，确保将值转换为 int ，因为 css() 方法将单位(px/em..)与其值一起给出。

    if(parseInt($("ul#listName").css("margin-left"), 10) == -3480){
        $(".nextButton").hide();
    }    

如果您正在任何动画回调上执行此代码，则建议您检查<=而不是==，因为在动画期间该值可能不那么完美。请尝试这个。

    if(parseInt($("ul#listName").css("margin-left"), 10) <= -3480){
        $(".nextButton").hide();
    }  

- ShankarSangoli

Answer 5

我没有你的完整脚本可以使用，但我建议在$("ul#listName").css("margin-left")上使用console.log()，以查看它是否实际输出你认为的内容。我还建议使用<=，以防你没有达到精确值。

我只是根据假设在工作，但希望这会有所帮助。

- Taylor Rose