时间戳

首页 > 解决方案 > 使用 Jquery/Javascript 在特定页面上隐藏带有特定文本的特定 div

javascript - 使用 Jquery/Javascript 在特定页面上隐藏带有特定文本的特定 div

问题描述

我想使用 Javascript、Jquery 或 CSS 隐藏特定页面上的元素。我的选择非常有限，因为我使用的是非常严格的 eshop 解决方案。我可以添加 Jquery 或 Javascript，但它会插入到我的 eshop 上的每个页面中。我不想让我的网站超载，所以第一个条件必须是“如果 body 类是 .view-commodity-detail”（这是每个产品详细信息的页面）做一些事情。

我需要的第二个条件是使用.detaillist-row类隐藏 div，但仅隐藏文本Luggage Volume所在的那个。（我还需要隐藏此 div 参数的 .detaillist-row-value - 例如 50-59L、60-69L 等。）

我在 eshop 产品页面上的代码如下所示

<body class=".view-commodity-detail">
  <div class="vc-commoditydetail_parameters">
     <div class="detaillist-row">
        <div class="detaillist-row-name">Luggage Volume</div>
        <div class="detaillist-row-value"><span>50-59l</span></div>
        <div class="detaillist-row-value"><span>60-69l</span></div>
     </div>
     <div class="detaillist-row">
        <div class="detaillist-row-name">Weight</div>
        <div class="detaillist-row-value"><span>2500 G</span></div>
     </div>
     <div class="detaillist-row">
        <div class="detaillist-row-name">Size</div>
        <div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
     </div>
  </div>
</body>

我正在考虑使用这样的东西，但它会隐藏我所有的细节列表行，我只想隐藏 Luggage Volume 所在的那个。

if ($("body").hasClass(".view-commodity-detail")) {
  if ($('.detaillist-row > .detaillist-row-name:contains("Luggage volume")').length > 0) {
     $(".detaillist-row").hide();
  }
}

我希望它有任何意义。

谢谢你们的帮助！

标签： javascripthtmljquerycsshide

解决方案

您可以使用它来执行此操作，data-value但您需要添加data-value到要隐藏的元素。

像这样：

<div class="detaillist-row-name" data-value="Luggage Volume">Luggage Volume</div>


div[data-value="Luggage Volume"] {
  display: none;
}
<body class=".view-commodity-detail">
  <div class="vc-commoditydetail_parameters">
    <div class="detaillist-row">
      <div class="detaillist-row-name" data-value="Luggage Volume">Luggage Volume</div>
      <div class="detaillist-row-value"><span>50-59l</span></div>
      <div class="detaillist-row-value"><span>60-69l</span></div>
    </div>
    <div class="detaillist-row">
      <div class="detaillist-row-name">Weight</div>
      <div class="detaillist-row-value"><span>2500 G</span></div>
    </div>
    <div class="detaillist-row">
      <div class="detaillist-row-name">Size</div>
      <div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
    </div>
  </div>
</body>

或者你可以使用javascript 

<body class=".view-commodity-detail">
  <div class="vc-commoditydetail_parameters">
    <div class="detaillist-row">
      <div class="detaillist-row-name" id="detaillist-row-name">Luggage Volume</div>
      <div class="detaillist-row-value"><span>50-59l</span></div>
      <div class="detaillist-row-value"><span>60-69l</span></div>
    </div>
    <div class="detaillist-row">
      <div class="detaillist-row-name">Weight</div>
      <div class="detaillist-row-value"><span>2500 G</span></div>
    </div>
    <div class="detaillist-row">
      <div class="detaillist-row-name">Size</div>
      <div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
    </div>
  </div>
</body>



<script>
  var str = document.getElementById("detaillist-row-name").innerHTML;
  var n = str.replace("Luggage Volume", "");
  document.getElementById("detaillist-row-name").innerHTML = n;
</script>

推荐阅读