第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

更改類與選擇字段選項(xiàng)的屬性匹配的文本值范圍

更改類與選擇字段選項(xiàng)的屬性匹配的文本值范圍

喵喵時(shí)光機(jī) 2023-12-19 20:35:51
問(wèn)題:如何更改 Span 類與選擇字段選項(xiàng)屬性匹配的 Span 內(nèi)的文本?并且還使其靈活,這樣我就不需要對(duì)所有屬性和跨類進(jìn)行硬編碼?我想我需要一些解決方案,其中 JS 函數(shù)搜索跨度類并將其與選項(xiàng)屬性進(jìn)行匹配,如果存在匹配,則應(yīng)更新跨度文本。帶有選項(xiàng)屬性的演示選擇字段<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 需要根據(jù)與 span 類匹配的選項(xiàng)屬性進(jìn)行更改<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>我想創(chuàng)建 JS 函數(shù)來(lái)搜索選項(xiàng)屬性并搜索“.conditional-element-1”內(nèi)的跨度類如果存在匹配,則更新范圍文本。我還需要能夠添加更多屬性和跨度。$('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 });
查看完整描述

1 回答

?
慕容3067478

TA貢獻(xiàn)1773條經(jīng)驗(yàn) 獲得超3個(gè)贊

我更改了您的 HTML 以使其有效 - 最好使用數(shù)據(jù)屬性來(lái)存儲(chǔ)體重、尺寸和人員等信息。此外,保持此解決方案動(dòng)態(tài)更容易,因?yàn)樗鼜乃x選項(xiàng)中讀取所有屬性,并在屬性名稱以“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>


查看完整回答
反對(duì) 回復(fù) 2023-12-19
  • 1 回答
  • 0 關(guān)注
  • 122 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)