Question

我仅在具有选择字段的表单中显示提交按钮时遇到麻烦。我有下拉菜单，并且由于表单和按钮都具有相同的类名，因此它显示并隐藏了所有的类名，而不仅仅是该表单中的提交按钮。

我尝试了.closest和.siblings以及.this，但没有任何效果。我在做什么错了？

这是我的HTML

<div class="wp_cart_button_wrapper">
<form method="post" class="wp-cart-button-form" action="" style="display:inline" onsubmit="return ReadForm(this, true);">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="4ef19837f1" style="display: none;">
<input type="hidden" name="_wp_http_referer" value="/products/" style="display: none;">
<div class="wp_cart_variation_section">
<span class="wp_cart_variation_name">Logo Color  : </span>
<select name="variation1" class="wp_cart_variation1_select" onchange="ReadForm (this.form, false);"><option value=" "> </option><option value=" Black "> Black </option><option value=" Green "> Green </option><option value=" Red "> Red </option><option value=" Blue"> Blue</option></select><br></div>
<input type="submit" class="wspsc_add_cart_submit" name="wspsc_add_cart_submit" value="Add to Cart" style="display: none;"> 
<input type="hidden" name="wspsc_product" value="Suzuki Digital Fuel Gauge ( )" style="display: none;">
<input type="hidden" name="price" value="69.99" style="display: none;">
<input type="hidden" name="shipping" value="0.001" style="display: none;">
<input type="hidden" name="addcart" value="1" style="display: none;"> 
<input type="hidden" name="cartLink" value="https://motorgremlin.com:443/products/" style="display: none;"><input type="hidden" name="product_tmp" value="Suzuki Digital Fuel Gauge" style="display: none;">
<input type="hidden" name="item_number" value="" style="display: none;">
<input type="hidden" name="hash_one" value="9a905bd16028ff467e67534f28f2a986" style="display: none;">
<input type="hidden" name="hash_two" value="6c9ed95be3289ffa48e727369b49e5c2" style="display: none;">
</form>
</div>

jQuery

$(".wp_cart_variation_section select").on('change', function() {
        var x = this.selectedIndex;
        if (x == "") {
           $(".productButton, .wp_cart_button_wrapper input").hide();
        } else {
           $(".productButton, .wp_cart_button_wrapper input").show();
        }
    });
$(".productButton, .wp_cart_button_wrapper 
input").css("display","none");

我只想仅以该形式显示按钮。我该怎么做？

Answer 1

...它显示并隐藏所有这些内容，而不仅仅是该表单中的“提交”按钮。

使用:submit selector定位“提交”按钮。

$(".wp_cart_variation_section select").change(function () {
  var state = this.selectedIndex > 0;

  $(".productButton:submit, .wspsc_add_cart_submit").toggle(state);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wp_cart_button_wrapper">
  <form method="post" class="wp-cart-button-form" action="" style="display:inline" onsubmit="return ReadForm(this, true);">
    <input type="hidden" id="_wpnonce" name="_wpnonce" value="4ef19837f1" style="display: none;">
    <input type="hidden" name="_wp_http_referer" value="/products/" style="display: none;">
    
    <div class="wp_cart_variation_section">
      <span class="wp_cart_variation_name">Logo Color  : </span>
      <select name="variation1" class="wp_cart_variation1_select" onchange="ReadForm (this.form, false);">
        <option value=" "> </option>
        <option value=" Black "> Black </option>
        <option value=" Green "> Green </option>
        <option value=" Red "> Red </option>
        <option value=" Blue"> Blue</option>
      </select>
      <br>
    </div>
    
    <input type="submit" class="wspsc_add_cart_submit" name="wspsc_add_cart_submit" value="Add to Cart" style="display: none;">
    <input type="hidden" name="wspsc_product" value="Suzuki Digital Fuel Gauge ( )" style="display: none;">
    <input type="hidden" name="price" value="69.99" style="display: none;">
    <input type="hidden" name="shipping" value="0.001" style="display: none;">
    <input type="hidden" name="addcart" value="1" style="display: none;">
    <input type="hidden" name="cartLink" value="https://motorgremlin.com:443/products/" style="display: none;">
    <input type="hidden" name="product_tmp" value="Suzuki Digital Fuel Gauge" style="display: none;">
    <input type="hidden" name="item_number" value="" style="display: none;">
    <input type="hidden" name="hash_one" value="9a905bd16028ff467e67534f28f2a986" style="display: none;">
    <input type="hidden" name="hash_two" value="6c9ed95be3289ffa48e727369b49e5c2" style="display: none;">
  </form>
</div>

Answer 2

您的选择器似乎与“提交”按钮不匹配。试试这个吧。

var x = this.selectedIndex;
$(this).closest(".wp-cart-button-form").find(".wspsc_add_cart_submit").toggle(x && x > 0);

仅在选择字段不为空时显示提交按钮

2 个答案: