jquery 显示基于单选按钮选择的选项,但某些选择显示相同的选项

wfsdck30  于 2023-02-12  发布在  jQuery
关注(0)|答案(1)|浏览(99)

下面是我目前正在使用的脚本。我们展示了名称不同的选项,但有些选项会显示相同的选项(IE Sap Cherry和Cherry会显示相同的完成)。试图让它达到如果选择了一个选项,它会隐藏其他选项不显示的程度。我如何才能让它达到一些选项共享同一个选择器的程度?
我这样写是因为我们的网站使用了一个插件,它可以帮助我们轻松地添加选项。这个脚本允许我们有条件地显示选项,并轻松地管理更改。我无法控制它如何生成HTML,所以我必须解决这个问题。

jQuery(function($) {
  function woodSelection(woodType) {
    var classSelector = "." + woodType.replace(/\s+/g, '-').toLowerCase() + "-stains-div";
    $(classSelector).hide();
    $('#wood-choices input[type="radio"]').on('change', function() {
      if ($(this).val().startsWith(woodType)) {
        $(classSelector).show();
        $(".wood-swatch-div").not(classSelector).find("input[type='radio']").prop("checked", false);
      } else {
        $(classSelector).hide();
      }
    });
  }

  // Call the function when the document is ready
  $(document).ready(function() {
    var woodTypes = ['Oak', 'Brown Maple', 'Wormy Maple', 'Cherry', 'Sap Cherry', 'Rustic Cherry', 'Hickory', 'Rustic Hickory', 'Hard Maple', 'Quartersawn White Oak', 'Rustic Quartersawn White Oak', 'Walnut', 'Rustic Walnut'];

    $.each(woodTypes, function(index, woodType) {
      woodSelection(woodType);
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wood-choices">
<label class="tm-epo-field-label" for="tmcp_choice_0">
  <input type="radio" name="tmcp_radio_0" id="tmcp_choice_0" value="Oak_0">
  <span>Oak</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_1">
  <input type="radio" name="tmcp_radio_0" value="Rustic Cherry_1">
  <span>Rustic Cherry</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_2">
  <input type="radio" name="tmcp_radio_0" value="Rustic Hickory_2">
  <span>Rustic Hickory</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_3">
  <input type="radio" name="tmcp_radio_0" value="Brown Maple_3">
  <span>Brown Maple</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_4">
  <input type="radio" name="tmcp_radio_0" value="Sap Cherry_4">
  <span>Sap Cherry</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_5">
  <input type="radio" name="tmcp_radio_0" value="Hard Maple_5">
  <span>Hard Maple</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_6">
  <input type="radio" name="tmcp_radio_0" value="Hickory_6">
  <span>Hickory</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_7">
  <input type="radio" name="tmcp_radio_0" value="Cherry_7">
  <span>Cherry</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_8">
  <input type="radio" name="tmcp_radio_0" value="Quartersawn White Oak_8">
  <span>Quartersawn White Oak</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_9">
  <input type="radio" name="tmcp_radio_0" value="Rustic Walnut_9">
  <span>Rustic Walnut</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_10">
  <input type="radio" name="tmcp_radio_0" value="Walnut_10">
  <span>Walnut</span>
 </label>
 <label class="tm-epo-field-label" for="tmcp_choice_11">
  <input type="radio" name="tmcp_radio_0" value="Wormy Maple_11">
  <span>Wormy Maple</span>
 </label>
</div>
<div class="stain-container">
  <div class="oak-stains-div wood-swatch-div">
    <p>Oak finishes shown here</p>
  </div>
  <div class="brown-maple-stains-div wormy-maple-stains-div wood-swatch-div">
    <p>Brown &amp; Wormy finishes shown here</p>
  </div>
  <div class="cherry-stains-div rustic-cherry-stains-div sap-cherry-stains-div wood-swatch-div">
    <p>Rustic, Sap, &amp; Clean Cherry finishes shown here</p>
  </div>
  <div class="hard-maple-stains-div wood-swatch-div">
    <p>Hard Maple finishes shown here</p>
  </div>
  <div class="hickory-stains-div rustic-hickory-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Hickory finishes shown here</p>
  </div>
  <div class="rustic-quartersawn-white-oak-stains-div quartersawn-white-oak-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Quartersawn White Oak finishes shown here</p>
  </div>
  <div class="rustic-walnut-stains-div walnut-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Walnut finishes shown here</p>
  </div>
</div>

我也尝试了Map选项,以便一些将配对,但这也不起作用:

jQuery(function($) {
  function woodSelection(woodType, classSelector) {
    $(classSelector).hide();
    $('#wood-choices input[type="radio"]').on('change', function() {
      if ($(this).val().startsWith(woodType)) {
        $(classSelector).show();
        $(".wood-swatch-div").not(classSelector).find("input[type='radio']").prop("checked", false);
      } else {
        $(classSelector).hide();
      }
    });
  }

  // Call the function when the document is ready
  $(document).ready(function() {
    var woodTypes = [
    { name: 'Oak', selector: '.oak-stains-div' },
    { name: 'Brown Maple', selector: '.brown-maple-stains-div' },
    { name: 'Wormy Maple', selector: '.brown-maple-stains-div' },
    { name: 'Cherry', selector: '.cherry-stains-div' },
    { name: 'Sap Cherry', selector: '.cherry-stains-div' },
    { name: 'Rustic Cherry', selector: '.cherry-stains-div' },
    { name: 'Hickory', selector: '.hickory-stains-div' },
    { name: 'Rustic Hickory', selector: '.hickory-stains-div' },
    { name: 'Hard Maple', selector: '.hard-maple-stains-div' },
    { name: 'Quartersawn White Oak', selector: '.quartersawn-white-oak-stains-div' },
    { name: 'Rustic Quartersawn White Oak', selector: '.quartersawn-white-oak-stains-div' },
    { name: 'Walnut', selector: '.walnut-stains-div' },
    { name: 'Rustic Walnut', selector: '.walnut-stains-div' }
    ];

    $.each(woodTypes, function(index, woodType) {
      woodSelection(woodType.name, woodType.selector);
    });
  });
});
50pmv0ei

50pmv0ei1#

我将创建一个map,其中每个单选值作为键,对应的CSS选择器作为值,而不是woodTypes数组。
我们可以在所有的radio中添加一个change事件监听器,当change事件的处理程序被调用时,它可以得到被点击的radio的value属性--要显示的CSS选择器,然后我们可以遍历所有的.wood-swatch-div元素,如果元素有选择器,就显示它,否则就隐藏它。

    • 更新**单选值包含显示索引是一个奇怪的设计。但是,我们可以通过简单地从Map键中省略索引部分(Oak代替Oak_0),然后在我们获得所选单选按钮的值-$(this).val().replace(/_\d*$/, '')时删除索引来解决这个约束。

代码现在变为:

const selectorsByValue = {
  'Oak': '.oak-stains-div',
  'Rustic Cherry': '.cherry-stains-div',
  'Rustic Hickory': '.hickory-stains-div',
  'Brown Maple': '.brown-maple-stains-div',
  'Sap Cherry': '.cherry-stains-div',
  'Hard Maple': '.hard-maple-stains-div',
  'Hickory': '.hickory-stains-div',
  'Cherry': '.cherry-stains-div',
  'Quartersawn White Oak': '.quartersawn-white-oak-stains-div',
  'Rustic Walnut': '.walnut-stains-div',
  'Walnut': '.walnut-stains-div',
  'Wormy Maple': '.brown-maple-stains-div'
};

$('.wood-swatch-div').hide();

$('input[type="radio"][name="tmcp_radio_0"]').on('change', function () {
  const val = $(this).val().replace(/_\d*$/, '');
  const selector = selectorsByValue[val];
  
  $('.wood-swatch-div').each(function () {
    const $this = $(this);
    if ($this.is(selector)) {
      $this.show();
    } else {
      $this.hide();
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wood-choices">
  <label class="tm-epo-field-label" for="tmcp_choice_0">
    <input type="radio" name="tmcp_radio_0" id="tmcp_choice_0" value="Oak_0">
    <span>Oak</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_1">
    <input type="radio" name="tmcp_radio_0" value="Rustic Cherry_1">
    <span>Rustic Cherry</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_2">
    <input type="radio" name="tmcp_radio_0" value="Rustic Hickory_2">
    <span>Rustic Hickory</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_3">
    <input type="radio" name="tmcp_radio_0" value="Brown Maple_3">
    <span>Brown Maple</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_4">
    <input type="radio" name="tmcp_radio_0" value="Sap Cherry_4">
    <span>Sap Cherry</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_5">
    <input type="radio" name="tmcp_radio_0" value="Hard Maple_5">
    <span>Hard Maple</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_6">
    <input type="radio" name="tmcp_radio_0" value="Hickory_6">
    <span>Hickory</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_7">
    <input type="radio" name="tmcp_radio_0" value="Cherry_7">
    <span>Cherry</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_8">
    <input type="radio" name="tmcp_radio_0" value="Quartersawn White Oak_8">
    <span>Quartersawn White Oak</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_9">
    <input type="radio" name="tmcp_radio_0" value="Rustic Walnut_9">
    <span>Rustic Walnut</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_10">
    <input type="radio" name="tmcp_radio_0" value="Walnut_10">
    <span>Walnut</span>
  </label>
  <label class="tm-epo-field-label" for="tmcp_choice_11">
    <input type="radio" name="tmcp_radio_0" value="Wormy Maple_11">
    <span>Wormy Maple</span>
  </label>
</div>
<div class="stain-container">
  <div class="oak-stains-div wood-swatch-div">
    <p>Oak finishes shown here</p>
  </div>
  <div class="brown-maple-stains-div wormy-maple-stains-div wood-swatch-div">
    <p>Brown &amp; Wormy finishes shown here</p>
  </div>
  <div class="cherry-stains-div rustic-cherry-stains-div sap-cherry-stains-div wood-swatch-div">
    <p>Rustic, Sap, &amp; Clean Cherry finishes shown here</p>
  </div>
  <div class="hard-maple-stains-div wood-swatch-div">
    <p>Hard Maple finishes shown here</p>
  </div>
  <div class="hickory-stains-div rustic-hickory-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Hickory finishes shown here</p>
  </div>
  <div class="rustic-quartersawn-white-oak-stains-div quartersawn-white-oak-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Quartersawn White Oak finishes shown here</p>
  </div>
  <div class="rustic-walnut-stains-div walnut-stains-div wood-swatch-div">
    <p>Rustic &amp; Clean Walnut finishes shown here</p>
  </div>
</div>

我创建了一个fiddle以供参考。

相关问题