我有一個下拉選擇器，以及一個需要隱藏或顯示的按鈕，具體取決于選擇選項中自定義屬性的值。
HTML
<div id="container-3">
<div id="inside-container">
<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes">
<option value="1kg" selected="selected" stock-status="true" class="attached enabled">1kg - $75.90 - (In Stock)</option>
<option value="2kg" stock-status="false" class="attached enabled">2kg - $119.90 - (No Stock)</option>
<option value="3kg" stock-status="false" class="attached enabled">3kg - $174.90 - (No Stock)</option>
<option value="5kg" stock-status="false" class="attached enabled">5kg - $262.90 - (No Stock)</option>
<option value="10kg" stock-status="false" class="attached enabled">10kg - $482.90 - (No Stock)</option>
<option value="20kg" stock-status="false" class="attached enabled">20kg - $823.90 - (No Stock)</option>
</select>
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-is-unavailable">Add to cart</button>
</div>
</div>
我想出的jQuery，但不作業：
$(document).ready(function() {
$('#pa_size').change(function(){
if($("#pa_size").find("option:selected").attr('stock-status') == "false") {
$("#container-3 .single_add_to_cart_button").hide();
} else {
$("#container-3 .single_add_to_cart_button").show();
}
});
});
/*
I also tried using the following if statement:
if($('#pa_size option:selected').attr("stock-status") == "false") {
*/
我在這里為它設定了一個 jfiddle 。
- 我的第一個問題是，我如何使這個 jQuery 作業，并且我是否以合適的方式進行了處理（除了錯誤是什么）？
我還有一個相關的問題...
- 在有任何用戶互動之前運行它的最佳方法是什么？例如，頁面已加載，并且在下拉選單中選擇了默認值。我希望針對它運行相同的測驗，這樣如果
stock-status已經存在，false那么按鈕將隱藏。
uj5u.com熱心網友回復：
正如我在評論中所說，您的代碼不起作用的原因是：
這“將使您的 html 看起來像<div id="“container-3”">
這里的選擇器$("#container-3 .single_add_to_cart_button")不會回傳任何元素，因為#container-3不存在。在您的情況下，元素的 id 看起來像“container-3”
此外，如果您想確保按鈕根據默認值隱藏/顯示，那么您可以添加.trigger("change")
演示
顯示代碼片段
$(document).ready(function() {
$('#pa_size').change(function() {
if ($("#pa_size").find("option:selected").attr('stock-status') == "false") {
$("#container-3 .single_add_to_cart_button").hide();
} else {
$("#container-3 .single_add_to_cart_button").show();
}
}).trigger("change");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container-3">
<div id="inside-container">
<select id="pa_size" class="" name="attribute_pa_size" data-attribute_name="attribute_pa_size" data-show_option_none="yes">
<option value="1kg" stock-status="true" class="attached enabled">1kg - $75.90 - (In Stock)</option>
<option value="2kg" stock-status="false" class="attached enabled">2kg - $119.90 - (No Stock)</option>
<option value="3kg" selected="selected" stock-status="false" class="attached enabled">3kg - $174.90 - (No Stock)</option>
<option value="5kg" stock-status="false" class="attached enabled">5kg - $262.90 - (No Stock)</option>
<option value="10kg" stock-status="false" class="attached enabled">10kg - $482.90 - (No Stock)</option>
<option value="20kg" stock-status="false" class="attached enabled">20kg - $823.90 - (No Stock)</option>
</select>
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-is-unavailable">Add to cart</button>
</div>
</div>uj5u.com熱心網友回復：
我看過你的代碼和小提琴。您的代碼在小提琴中按預期作業，我沒有看到任何錯誤。
Q1。如何運行 jQuery 代碼？
答。=> 我可以看到您沒有使用 Script 標簽添加 jQuery CDN 來運行 jQuery 代碼。您必須在 HTML 頁面中添加以下腳本標簽才能運行 jQuery。
jQuery CDN 鏈接 -><script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
Q2。在有任何用戶互動之前運行它的最佳方法是什么？
Ans => 下面是設定默認選項以選擇標簽 onl oad 的示例。
$('#pa_size').val("3kg");
在這里找到小提琴-> https://jsfiddle.net/7410quvf/3/
并且訪問以下行所選選項的自定義屬性的訪問值可能很有用。
$("#pa_size").find("option:selected").attr('stock-status')
在這里找到小提琴-> https://jsfiddle.net/m29d8aby/1/
希望這可以清除您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489712.html
標籤：jQuery