隱藏基於另一個div顯示的div
[英]Hide a div based on another div display
問題描述
如果另一個div具有顯示樣式，我想更改一個div的顯示。 使用類名作為標識符
<!-- if this div display is block --> <div class="product alert stock"> <a href="#" data-post="{"action":"https:\\/\\/www.99bikes.com.au\\/productalert\\/add\\/stock\\/product_id\\/241114\\/uenc\\/aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,\\/","data":{"uenc":"aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,"}}" title="Out of stock" class="action alert">Out of stock</a> </div> <!-- then this div display is none --> <div class="shipping-benefits"> <div id="productBPG" class="row w-row"> <div class="w-col w-col-12"> <div id="vertical_tabs" class="vertical-tabs ui-accordion ui-widget ui-helper-reset" role="tablist"> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-vertical_tabs-header-0" aria-controls="ui-accordion-vertical_tabs-panel-0" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span class="titleBPG">5% Best Price Guarantee </span> <span class="subtitle">We'll beat any price by 5%*</span></h3> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-vertical_tabs-panel-0" aria-labelledby="ui-accordion-vertical_tabs-header-0" role="tabpanel" aria-hidden="true" style="display: none;"> <img class="logoBPG" src="/media/wysiwyg/bike-type/99-bikes-5_-price-beat-guarantee-product.png" alt="5% Price Beat Guarantee | We'll beat any price by 5%"> <p class="paragraph small"> Our 5% Best Price Guarantee is our commitment that we offer the lowest price. If you find a cheaper price, we will beat it by 5%. </p> <ul> <li class="paragraph small"> Applies to any cheaper price found on any online store in Australia, or in a physical store within Australia. </li> <li class="paragraph small"> Applies when the competitor's final price inclusive of any taxes and delivery fees. </li> <li class="paragraph small"> *Excludes Garmin, other exclusions apply <a href="https://www.99bikes.com.au/price-beat">learn more here</a>. </li> </ul> <a class="button minimal sml w-button BPGbtn" onclick="return buildURLpricebeat(this)" href="" target="_blank">Request a Price Match</a> </div> </div> </div> </div> </div>
2 個解決方案
解決方案1
1 2019-02-19 06:40:47
使用一些簡單的JavaScript：
if (document.querySelector(".product.alert.stock").style.display == "block") {
document.querySelector(".shipping-benefits").style.display = "none";
}
在setInterval調用它，它將起作用。
解決方案2
0 已采納 2019-02-19 06:40:18
您可以通過使用條件來檢查div是否可見，並使用JQuery進行操作
if($('.product.alert.stock').is(':visible')) {
$('.shipping-benefits').hide()
}
這是工作代碼段：
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ if($('.product.alert.stock').is(':visible')) { $('.shipping-benefits').hide(); } }); </script> </head> <body> <div class="product alert stock"> <a href="#" data-post="{"action":"https:\\/\\/www.99bikes.com.au\\/productalert\\/add\\/stock\\/product_id\\/241114\\/uenc\\/aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,\\/","data":{"uenc":"aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,"}}" title="Out of stock" class="action alert">Out of stock</a> </div> <!-- then this div display is none --> <div class="shipping-benefits"> <div id="productBPG" class="row w-row"> <div class="w-col w-col-12"> <div id="vertical_tabs" class="vertical-tabs ui-accordion ui-widget ui-helper-reset" role="tablist"> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-vertical_tabs-header-0" aria-controls="ui-accordion-vertical_tabs-panel-0" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span class="titleBPG">5% Best Price Guarantee </span> <span class="subtitle">We'll beat any price by 5%*</span></h3> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-vertical_tabs-panel-0" aria-labelledby="ui-accordion-vertical_tabs-header-0" role="tabpanel" aria-hidden="true" style="display: none;"> <img class="logoBPG" src="/media/wysiwyg/bike-type/99-bikes-5_-price-beat-guarantee-product.png" alt="5% Price Beat Guarantee | We'll beat any price by 5%"> <p class="paragraph small"> Our 5% Best Price Guarantee is our commitment that we offer the lowest price. If you find a cheaper price, we will beat it by 5%. </p> <ul> <li class="paragraph small"> Applies to any cheaper price found on any online store in Australia, or in a physical store within Australia. </li> <li class="paragraph small"> Applies when the competitor's final price inclusive of any taxes and delivery fees. </li> <li class="paragraph small"> *Excludes Garmin, other exclusions apply <a href="https://www.99bikes.com.au/price-beat">learn more here</a>. </li> </ul> <a class="button minimal sml w-button BPGbtn" onclick="return buildURLpricebeat(this)" href="" target="_blank">Request a Price Match</a> </div> </div> </div> </div> </div> </body> </html>
如何隱藏一個 div 並顯示包含在同一個 div 中的另一個 div？
[英]How to hide a div and display another div that is contained within the same div?
在給定類的div中查找數字，並根據值隱藏/顯示div
[英]Find number in div of given class, and hide/display div based on value
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.