如何使用 jquery 或 javascript 隐藏 div？

Posted 2023-02-25

【中文标题】如何使用 jquery 或 javascript 隐藏 div？

【英文标题】：How to hide div using jquery or java script?

【发布时间】：2014-10-31 05:50:29

【问题描述】：

您好，如果值为 0.00，我想隐藏一个跨度和一个 div。这是我的代码

<span class="price-old"> <%=getCurrentAttribute('item','custitem_sumisho_listprice')%>      </span>
<span class="price-new"><%=getCurrentAttribute('item','custitem_sumisho_onlineprice')%>  </span>
<div class="save-sale" style="font-size: .8em; padding-top: 4em"><%=getCurrentAttribute('item','custitem_sumisho_totalsave')%></div>

在上面的代码中，如果 class="save-sale" 的 div 将具有 0.00 值，那么我想隐藏 class="price-old" 和 class="save-sale"。这里 getattribute 标签会得到商品价格的价值。

我已经尝试了下面的 jquery，但它不起作用

<script type="text/javascript" src="/site/js/jquery-1.10.2.min.js"></script>
<script>
$(function () 
if ($(".save-sale").text() == "0.00") 
$(".save-sale").hide();
$(".price-old").hide();

);
</script>

【问题讨论】：

但这是有效的jsfiddle.net/u98b4fzm/2

【参考方案1】：

由于您有多个save-sale div，您可以使用.each() 来迭代它们并检查其值以隐藏save-sale 和price-old。

<script type="text/javascript" src="/site/js/jquery-1.10.2.min.js"></script>
<script>
$(function () 
  $(".save-sale").each(function()
  if ($(this).text().trim() == "0.00") 
       $(this).hide();
       $(this).prev(".prod-price").find(".price-old").hide();
    
  );
);
</script>

DEMO

【讨论】：

我只是建议了另一种实现相同的方法，但问题可能出在 jquery 包含否则代码看起来不错。

您检查过任何控制台错误吗？并验证 jQuery 库路径是否正确并已在浏览器中加载？

我需要将其转换为四舍五入的值吗？

您可以按照 Sanki 在以下答案中的建议使用trim()，或者与您的问题陈述分享一个 jsfiddle 链接，以更好地帮助您。 these 也是检查 jquery 是否加载的方法。

可能是item很多，会一一检查，是不是脚本没有运行的问题？

【参考方案2】：

你可以使用

$(".class or #id").hide()

或类似但使用css样式的东西

$(".class or #id").css('display','none')

但如果你想将其设置为所有具有类的元素，显然使用每个函数：

$(".class").each(函数() $(this).css('display','none') );

【参考方案3】：

DEMO FIDDLE

试试这个：

<script type="text/javascript" src="/site/js/jquery-1.10.2.min.js"></script>
<script>
  $(function () 
    if ($.trim($(".save-sale").text()) == "0.00") 
    $(".save-sale").hide();
    $(".price-old").hide();
  
);
</script>

对于具有相同类名的多个 div，您可以尝试以下操作：

$(function () 
$(".save-sale").each(function (i) 
    if ($.trim($(this).text()) == "0.00") 
        $(this).closest(".save-sale").hide();
        $(this).closest(".price-old").hide();
    
     else
        $(this).closest(".save-sale").show();
        $(this).closest(".price-old").show();
    
);
);

UPDATED FIDDLE

【讨论】：

我有多个具有相同类名的 div 如何在 div 上一一应用此代码以检查值和隐藏类