javascript - 更改类与选择字段选项的属性匹配的文本值范围

Question

问题:如何更改范围内的文本，其中范围类与选择字段选项属性相匹配？并且还使其灵活，这样我就不需要对所有属性和跨类进行硬编码？

我认为我需要一些解决方案，其中 JS 函数搜索并匹配 span 类与选项属性，如果存在匹配，则应更新 span 文本。

带有选项属性的演示选择字段

<select class="conditional-element-selector">
    <option value="select-element-1" weight="12" size="20" persons="10">Option 1</option>
    <option value="select-element-2" weight="24" size="40" persons="20">Option 2</option>
    <option value="select-element-3" weight="48" size="80" persons="40">Option 3</option>
</select>

演示 HTML，其中 span 需要根据与 span 类匹配的选项属性进行更改

<div class="conditional-element-1">   
    <li>Weight: <span class="weight">12</span> kg </li>
    <li>Persons: <span class="persons">10</span></li>
    <li>Size: <span class="size">20</span> m3 </li>
</div>

我想创建 JS 函数来搜索选项属性并搜索“.conditional-element-1”内的跨度类，如果存在匹配，则更新跨度文本。我还需要能够添加更多属性和跨度。

$('select.conditional-element-selector').on('change', function() {
  var targetIndex = this.selectedIndex + 1; // This looks at which option is selected
  $('.conditional-element-' + targetIndex).... // This is unfinshed 

// Extend function here to match different span classes with different option attributes and change span text 

});

Answer 1

为了使您的 HTML 有效，我更改了您的 HTML - 最好使用数据属性来存储体重、尺寸和人员等信息。此外，更容易保持此解决方案的动态，因为它会读取所选选项中的所有属性，并在属性名称以“data”开头的情况下附加它们的值。

$(document).ready(function() {
   $('select.conditional-element-selector').on('change', function() {
      var targetIndex = this.selectedIndex;
      var selected = $(this).children("option:selected");
         $(selected).each(function() {
            $.each(this.attributes, function() {
             if (this.name.startsWith("data")) {
               var attrName = this.name.substr(5);
               $('.conditional-element-' + targetIndex).find("." + attrName).text(this.value)
             }
            });
         });
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="conditional-element-selector">
  <option>Please select</option>
  <option value="select-element-1" data-weight="12" data-size="20" data-persons="10">Option 1</option>
  <option value="select-element-2" data-weight="24" data-size="40" data-persons="20">Option 2</option>
  <option value="select-element-3" data-weight="48" data-size="80" data-persons="40">Option 3</option>
</select>
<div class="conditional-element-1">
  <ul>
<li><span class="weight"></span> kg</li>
<li><span class="persons"></span></li>
<li><span class="size"></span> m3</li>
  </ul>
</div>
<div class="conditional-element-2">
   <ul>
<li><span class="weight"></span> kg</li>
<li><span class="persons"></span></li>
<li><span class="size"></span> m3</li>
  </ul>
</div>
<div class="conditional-element-3">
   <ul>
<li><span class="weight"></span> kg</li>
<li><span class="persons"></span></li>
<li><span class="size"></span> m3</li>
  </ul>
</div>