如何使用jQuery顯示/隱藏基于多個輸入組的元素？

我在一頁上有多個產品表格。每個表單中都有多個顏色選項（單選按鈕），帶有available或unavailable屬性。

我想根據所選顏色選項是否可用，為每個產品顯示一個自定義的添加到購物車按鈕，即。如果input[available]:checked顯示.button-available其他顯示.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();
            }
    });
});

預先感謝您的指導。

uj5u.com熱心網友回復：

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

最接近給你更多的子句元素與類。您還需要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').show();
    $(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>

標籤：html 查询

上一篇：jquery中的returnfalse每次回圈都沒有結束整個函式

下一篇：php版本升級到8后，顯示這個錯誤