Wie kann ich die Deckkraft des Bildes von id Master auf 1 ändern, wenn ich die Option mit dem Wert 1 (MasterCard) auswähle? und es in eine Funktion einfügen, die mit diesen 4 Werten arbeitet, jeder mit seiner eigenen ID? Ich möchte, dass das Standardbild 0,3 hat und wenn eine der Optionen ausgewählt ist, hat das Bild eine Deckkraft von 1.
.itemForm2 {
width: 100%;
position: relative;
margin-bottom: 18px;
margin-top: 10px;
display: flex;
flex-direction: row;
}
.escolhaCartao {
display: flex;
flex-direction: row;
width: 218px!important;
gap: 10px;
}
@media(min-width:768px) {
.escolhaCartao {
width: 258px!important;
height: 34.32px;
gap: 5px;
}
.lineFormCartao {
display: flex;
flex-direction: row;
justify-content: inherit;
gap: 16px;
}
.escolhaCartao img {
opacity: .3;
}
}
<div class="lineForm lineFormCartao">
<div class="itemForm">
<select id="OpcoesCartao" name="OpcoesCartao">
<option value="1">Mastercard</option>
<option value="2">Visa</option>
<option value="3">Elo</option>
<option value="4">Amex</option>
</select>
</div>
<div class="itemForm2 escolhaCartao">
<img id="master" src="images/master.png" alt="Logo cartão Mastercard">
<img id="visa" src="images/visa.png" alt="Logo cartão Visa">
<img id="elo" src="images/elo.png" alt="Logo cartão Elo">
<img id="amex" src="images/amex.png" alt="Logo cartão Amex">
</div>
</div>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
仅使用 CSS 和 has
.escolhaCartao img { opacity: .2; } .itemForm:has(option[value="1"]:checked) + .itemForm2 > #master, .itemForm:has(option[value="2"]:checked) + .itemForm2 > #visa, .itemForm:has(option[value="3"]:checked) + .itemForm2 > #elo, .itemForm:has(option[value="4"]:checked) + .itemForm2 > #amex { opacity: 1; }使用 JavaScript
var sel = document.querySelector("#OpcoesCartao"); const imgs = document.querySelectorAll(".escolhaCartao img"); sel.addEventListener("change", function (e) { const val = this.value; const selected = document.querySelector(".escolhaCartao img.selected"); if (selected) { selected.classList.remove('selected'); } imgs[+val - 1].classList.add('selected'); }); sel.dispatchEvent(new Event('change'));.escolhaCartao img { opacity: .2; } .escolhaCartao img.selected { opacity: 1; }你可以这样做。这适用于大多数浏览器。 Firefox 应该很快就会支持它 (https://caniuse.com/?search=has) p>
.itemForm2 { width: 100%; position: relative; margin-bottom: 18px; margin-top: 10px; display: flex; flex-direction: row; } .escolhaCartao { display: flex; flex-direction: row; width: 218px!important; gap: 10px; } .lineForm:has( option[value="1"]:checked ) #master { opacity: 1; } .lineForm:has( option[value="2"]:checked ) #visa { opacity: 1; } .lineForm:has( option[value="3"]:checked ) #elo { opacity: 1; } .lineForm:has( option[value="4"]:checked ) #amex { opacity: 1; } .escolhaCartao { width: 258px!important; height: 34.32px; gap: 5px; } .lineFormCartao { display: flex; flex-direction: row; justify-content: inherit; gap: 16px; } .escolhaCartao img { opacity: .3; }