我有一個這樣的 html
<div class="container">
<select class="product-select" id="product-selections">
<option data-option-1="M" data-option-2="cream" data-available="true" value="31979558568034">M / cream</option>
<option data-option-1="M" data-option-2="yellow" data-available="false" value="31979558568035">M / yellow</option>
<option data-option-1="M" data-option-2="red" data-available="true" value="31979558568036">M / red</option>
<option data-option-1="M" data-option-2="green" data-available="false" value="31979558568037">M / green</option>
<option data-option-1="M" data-option-2="blue" data-available="false" value="31979558568038">M / blue</option>
</select>
<div class="colors">
<span class="creme">Creme</span>
<span class="blue">Blue</span>
<span class="yellow">Yellow</span>
<span class="red">Red</span>
<span class="green">Green</span>
</div>
</div>
我想將類“不可用”添加到具有與屬性 data-available=false 下拉串列中的選項元素中的 data-option-2 值匹配的類的跨元素。
例如：
<option data-option-1="M" data-option-2="yellow" data-available="false"
value="31979558568034">M / yellow</option>
它有 data-available="false" 和 data-option-2="yellow" 所以我想將類“not-available”添加到 Yellow 因為它具有與 data-option-2 的值匹配的黃色類資料可用=假。所以結果應該是這樣的：
<div class="colors">
<span class="creme">Creme</span>
<span class="blue not-available">Blue</span>
<span class="yellow not-available">Yellow</span>
<span class="red">Red</span>
<span class="green not-available">Green</span>
</div>
感謝所有的幫助。我真的很感激。
uj5u.com熱心網友回復：
$('#product-selections > option[data-available=false]').each(function(){
let dataOption2 = $(this).attr('data-option-2');
$('div.colors > span.' dataOption2).addClass('not-available');
});.not-available {
text-decoration: line-through;
background-color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
<select class="product-select" id="product-selections">
<option data-option-1="M" data-option-2="cream" data-available="true" value="31979558568034">M / cream</option>
<option data-option-1="M" data-option-2="yellow" data-available="false" value="31979558568035">M / yellow</option>
<option data-option-1="M" data-option-2="red" data-available="true" value="31979558568036">M / red</option>
<option data-option-1="M" data-option-2="green" data-available="false" value="31979558568037">M / green</option>
<option data-option-1="M" data-option-2="blue" data-available="false" value="31979558568038">M / blue</option>
</select>
<div class="colors">
<span class="creme">Creme</span>
<span class="blue">Blue</span>
<span class="yellow">Yellow</span>
<span class="red">Red</span>
<span class="green">Green</span>
</div>
</div>uj5u.com熱心網友回復：
開始只是一個快速提醒，因為 Html 本身并不是一種可以根據動作自動改變事物的互動語言，因為在動作之后自動暗示了一種行為。因為您通過 css 規則在 Html 中實作的內容將被顯示，并且不會在沒有事件觸發它的情況下將任何 html 屬性“添加”或“洗掉”到另一個元素。我的意思是，您需要使用 javascript 或 ajax 來使作業以正確的方式更輕松地完成。在現實生活中的應用程式中，可用資料必須是來自資料庫的資訊，這是另一件需要考慮的事情。假設您必須通過在視圖中設定資料來對其進行硬編碼。那么您需要向 Select 元素添加一個事件偵聽器，以便用戶點擊它選擇他的選擇，跨度元素。讓我們呼叫該函式 mySelectedItem()。您將在select標簽中擁有這樣的內容：
<select class="product-select" id="product-selections onSelect=mySelected()">
然后您將在您的 javascript 檔案中或直接在您的 html 檔案的標簽中定義 javascript 函式。你可能有：
<script>
function mySelected() {
const newSpan = document.querySelector('.blue');
newSpan.classList.add('not-available');
}
</script>
請注意：
> document.querySelector('.blue')
將選擇類“藍色”和
> newSpan.classList.add('not-available')
將添加到該類“不可用” 這是關于如何自動將“不可用”添加到另一個類的概述。您將需要 javascript 或 Ajax。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/391794.html