色综合欧美在线视频区,日韩一本之道一区中文字幕,两个人www高清免费视频

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

當(dāng)我選擇值為 1（萬事達(dá)卡）的選項(xiàng)時(shí)，如何才能將 id Master 的圖像的不透明度更改為 1？並將其放入適用於這 4 個(gè)值的函數(shù)中，每個(gè)值都有自己的 id？我希望預(yù)設(shè)影像為 0.3，當(dāng)選擇其中一個(gè)選項(xiàng)時(shí)，影像的不透明度為 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>

.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; }

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'));

.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; }