問題：如何更改 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 });
1 回答
慕容3067478
TA貢獻1773條經驗 獲得超3個贊
我更改了您的 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>
- 1 回答
- 0 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消