选择选项中基于自定义属性值的隐藏按钮

Question

我有一个下拉选择器，我需要隐藏或显示一个按钮，这取决于select选项中自定义属性的值。

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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- $75.90 &nbsp;- (In Stock)</option>
  <option value="2kg" stock-status="false" class="attached enabled">2kg - $119.90 &nbsp;- (No Stock)</option>
  <option value="3kg" stock-status="false" class="attached enabled">3kg - $174.90 &nbsp;- (No Stock)</option>
  <option value="5kg" stock-status="false" class="attached enabled">5kg - $262.90 &nbsp;- (No Stock)</option>
  <option value="10kg" stock-status="false" class="attached enabled">10kg - $482.90 &nbsp;- (No Stock)</option>
  <option value="20kg" stock-status="false" class="attached enabled">20kg - $823.90 &nbsp;- (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") {
*/

我为它设置了一个小提琴，这里。

1. 我的第一个问题是，如何使这个jQuery工作，并且我是否使用了一个合适的方法(除了错误之外)？

我还有一个相关的问题..。

1. 在没有任何用户交互之前，还有什么最好的方法来运行这个程序呢？例如，页面已经加载，并且在下拉列表中选择了一个默认值。我希望对它运行相同的测试，这样如果stock-status已经是false，那么按钮就会隐藏起来。

Answer 1

正如我在评论中所说的，您的代码不能工作的原因是：

“将使您的html看起来像<div id="“container-3”">。

这里的选择器$("#container-3 .single_add_to_cart_button")将不返回任何元素，因为#container-3不存在。在您的例子中，元素的id看起来像“container-3”

另外，如果要确保按钮是隐藏的/显示的，这取决于默认值，那么可以添加.trigger("change")

Demo

​

$(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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- $75.90 &nbsp;- (In Stock)</option>
      <option value="2kg" stock-status="false" class="attached enabled">2kg - $119.90 &nbsp;- (No Stock)</option>
      <option value="3kg" selected="selected" stock-status="false" class="attached enabled">3kg - $174.90 &nbsp;- (No Stock)</option>
      <option value="5kg" stock-status="false" class="attached enabled">5kg - $262.90 &nbsp;- (No Stock)</option>
      <option value="10kg" stock-status="false" class="attached enabled">10kg - $482.90 &nbsp;- (No Stock)</option>
      <option value="20kg" stock-status="false" class="attached enabled">20kg - $823.90 &nbsp;- (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>

​

Answer 2

我看过你的密码和小提琴。您的代码正在按预期的方式工作，我没有看到任何错误。

Q1。如何运行jQuery代码？

Ans。=> --我可以看到，您没有使用脚本标记添加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 =>是设置默认选项以选择标记onLoad的示例。

$('#pa_size').val("3kg");

在这里找到小提琴-> https://jsfiddle.net/7410quvf/3/

并且，访问以下所选选项的自定义属性的访问值可能是有用的。

$("#pa_size").find("option:selected").attr('stock-status')

在这里找到小提琴-> https://jsfiddle.net/m29d8aby/1/

希望这能澄清你的问题。