使用 Jquery/Javascript 在特定页面上隐藏带有特定文本的特定 div
[英]Hide specific div with specific text on specific page using Jquery/Javascript
问题描述
I would like to hide an element on a specific page by using Javascript, Jquery, or CSS.
我想通过使用 Javascript、Jquery 或 CSS 来隐藏特定页面上的元素。 I have really limited options on how to do it because I'm using a very strict eshop solution.我的选择非常有限，因为我使用的是非常严格的 eshop 解决方案。 I can add Jquery or Javascript but it will be inserted into every single page on my eshop.我可以添加 Jquery 或 Javascript 但它会插入到我的 eshop 的每一页中。 I don't want to overload my website so the first condition has to be something like "if body class is.view-commodity-detail" (which is a page for every product detail) do something.我不想让我的网站超载，所以第一个条件必须是“如果 body class is.view-commodity-detail”（这是每个产品详细信息的页面）做一些事情。
The second condition I need is to hide div with class .detaillist-row but only that one where the text Luggage Volume is located.我需要的第二个条件是使用 class .detaillist-row隐藏 div，但仅限于文本Luggage Volume所在的那个。 (I need to hide.detaillist-row-value of this div parameter also - such as 50-59L, 60-69L etc..) （我还需要隐藏此 div 参数的 hide.detaillist-row-value - 例如 50-59L、60-69L 等。）
My code on eshop product page looks like this我在 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>
I was thinking about using something like this, but it would hide all my detaillist-row and I want to hide only that one where the Luggage Volume is.我正在考虑使用这样的东西，但它会隐藏我所有的细节列表行，我只想隐藏 Luggage Volume 所在的那个。
if ($("body").hasClass(".view-commodity-detail")) { if ($('.detaillist-row >.detaillist-row-name:contains("Luggage volume")').length > 0) { $(".detaillist-row").hide(); } }
I hope it makes any sense.我希望它有任何意义。
Thank you guys for your help!谢谢你们的帮助！
1 个解决方案
解决方案1
0 2020-12-04 12:52:07
You can do this using data-value but you need to add data-value to that element which you want to hide.您可以使用data-value执行此操作，但您需要将data-value添加到要隐藏的元素中。
like this:像这样：
<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>
or you can use javascript或者你可以使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.