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

Question

问题：如何更改 Span 类与选择字段选项属性匹配的 Span 内的文本？并且还使其灵活，这样我就不需要对所有属性和跨类进行硬编码？我想我需要一些解决方案，其中 JS 函数搜索跨度类并将其与选项属性进行匹配，如果存在匹配，则应更新跨度文本。带有选项属性的演示选择字段<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 以使其有效 - 最好使用数据属性来存储体重、尺寸和人员等信息。此外，保持此解决方案动态更容易，因为它从所选选项中读取所有属性，并在属性名称以“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>