如何使用 jQuery 显示/隐藏基于多个输入组的元素？

Question

我在一页上有多个产品表单。每个表单中都有多个颜色选项（单选按钮），带有 available 或 unavailable 属性。

我想为每个产品显示一个自定义的添加到购物车按钮，具体取决于所选颜色选项是否可用，即。 if input[available]:checked show .button-available else show .button-unavailable

预期结果

页面加载时，始终会预先选择第一个颜色选项。根据其可用性，应显示相应的按钮。选择更改时，如果需要，按钮应更改。

HTML 结构

<div class="list-item">
  <form action="/cart/add" id="add-to-cart-1">
    <div class="radios">
      <div class="colors">
        <input type="radio" name="color" id="1" class="red" value="1" available>
        <input type="radio" name="color" id="2" class="blue" value="2" unavailable>
      </div>
    </div>
    <div class="button-available" style="display:none;">
      <input type="submit" value="Add to cart">
    </div>
    <div class="button-unavailable" style="display:none;">
      <button>Out of stock</button>
    </div>
  </form>
</div>

<div class="list-item">
  <form action="/cart/add" id="add-to-cart-2">
    <div class="radios">
      <div class="colors">
        <input type="radio" name="color" id="3" class="red" value="3" unavailable>
        <input type="radio" name="color" id="4" class="blue" value="4" available>
      </div>
    </div>
    <div class="button-available" style="display:none;">
      <input type="submit" value="Add to cart">
    </div>
    <div class="button-unavailable" style="display:none;">
      <button>Out of stock</button>
    </div>
  </form>
</div>

我对脚本的悲伤尝试

$(document).ready(function() {
  
    var $list = $('.list-item');

    $list.each(function(){

    if ( $('input[name=color][unavailable]:checked').val() !== 'true' ) {
        $(this).closest('.button-available').show();
    }
    if ( $('input[name=color][available]:checked').val() !== 'true' ) {
        $(this).closest('.button-unavailable').show();
    }
    $('input[name=color]:checked').on('change', function() {
        if ($(this).attr('available') == 'true' ) {
            $(this).closest('.button-available').show();
            $(this).closest('.button-unavailable').hide();
        } 
        else {
            $(this).attr('unavailable') == 'true' ) {
                $(this).closest('.button-available').show();
                $(this).closest('.button-unavailable').show();
            }
    });
});

提前感谢您的指导。

Answer 1

我建议您使用data() 更改您的可用/不可用属性。

closest 为您提供带有类的 more 子句元素。您还需要nextAll 或prevAll() 来获取下一个或上一个元素。

我可能忘了修理什么东西，如果有什么遗漏，请告诉我。

var $list = $('.list-item');

$list.each(function(){
  if ( $(this).find('input[name=color][data-statut="unavailable"]').is(':checked') === false ) {
      $(this).find('.button-available').show();
  }
  if ( $(this).find('input[name=color][data-statut="available"]').is(':checked') === false ) {
      $(this).find('.button-unavailable').show();
  }
});

$('input[name=color]').on('change', function() {
  if ($(this).data('statut') == 'available' ) {
    $(this).closest('.radios').nextAll('.button-available').show();
    $(this).closest('.radios').nextAll('.button-unavailable').hide();
  } 
  
  if ($(this).data('statut') == 'unavailable' ) {
    $(this).closest('.radios').nextAll('.button-available').hide();
    $(this).closest('.radios').nextAll('.button-unavailable').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
  <form action="/cart/add" id="add-to-cart-1">
    <div class="radios">
      <div class="colors">
        <input type="radio" name="color" id="1" class="red" value="1" data-statut="available">
        <input type="radio" name="color" id="2" class="blue" value="2" data-statut="unavailable">
      </div>
    </div>
    <div class="button-available" style="display:none;">
      <input type="submit" value="Add to cart">
    </div>
    <div class="button-unavailable" style="display:none;">
      <button>Out of stock</button>
    </div>
  </form>
</div>

<div class="list-item">
  <form action="/cart/add" id="add-to-cart-2">
    <div class="radios">
      <div class="colors">
        <input type="radio" name="color" id="3" class="red" value="3" data-statut="available">
        <input type="radio" name="color" id="4" class="blue" value="4" data-statut="unavailable">
      </div>
    </div>
    <div class="button-available" style="display:none;">
      <input type="submit" value="Add to cart">
    </div>
    <div class="button-unavailable" style="display:none;">
      <button>Out of stock</button>
    </div>
  </form>
</div>