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

Posted 2023-03-06

【中文标题】如何根据 CSS 中的 margin-left 值使用 jQuery 隐藏元素？

【英文标题】：How can I hide an element using jQuery based on the value of it's margin-left in the CSS?

【发布时间】：2012-03-24 00:38:14

【问题描述】：

我正在开发一个轮播式滑块，并希望在ul 的左边距等于-3480px 时隐藏其中一个控件。这是我的代码：

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

但它什么也没做，我不知道下一步该做什么。有没有人指点或建议？

【问题讨论】：

使用jquery UI，不要重新发明***！ ;)

另外，设置一个 JS fiddle，这样我们可以更清楚地看到你在尝试什么

jQuery 中的 .css() 方法返回与您的查询匹配的第一个元素。 “ul#listName”是否有多个匹配项？

@MildFuzz 我很想使用 jQuery UI，但这是一个非常奇怪的轮播实现，不适合 web。

我已经尝试过你的代码并且它可以工作（显然适应了不同的选择器）。您是否检查过该列表是否有该边距？也许它没有得到那个确切的数字，尝试用 Firebug（或类似的）检查。

【参考方案1】：

根据您制作动画的样式属性，您应该检查它。还要确保在比较之前将值转换为 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();
      

【参考方案2】：

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

【参考方案3】：

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

我使用parseInt 来显示替代方案，并避免在px 后缀时可能遇到的任何挂断。

【参考方案4】：

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

【讨论】：

position 返回一个数字对象。

是的，如果你使用 position().left 返回左位置 :) 测试并在两个滑块中使用它

【参考方案5】：

我没有你的完整脚本可玩，但我建议在$("ul#listName").css("margin-left") 上执行console.log()，看看它是否真的能输出你认为的结果。如果你没有达到那个确切的值，我也会使用

我只是在这里假设，但希望这会有所帮助。