How can I change the opacity of the image for id Master to 1 when I select the option with value 1 (MasterCard)? and put it into a function that works on those 4 values, each with its own id? I want the default image to be 0.3 and when one of the options is selected the image has an opacity of 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>
P粉5217482112024-04-04 19:38:39
Only using CSS and 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; }
Using 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; }
P粉7998853112024-04-04 14:44:15
You can do this. This works in most browsers. Firefox should support it soon (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; }