cari

Rumah  >  Soal Jawab  >  teks badan

Tukar kelegapan imej apabila memilih pilihan daripada borang

Bagaimana saya boleh menukar kelegapan imej id Master kepada 1 apabila saya memilih pilihan dengan nilai 1 (MasterCard)? dan masukkannya ke dalam fungsi yang berfungsi pada 4 nilai tersebut, masing-masing dengan idnya sendiri? Saya mahu imej lalai menjadi 0.3 dan apabila salah satu pilihan dipilih imej itu mempunyai kelegapan 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粉244155277P粉244155277232 hari yang lalu399

membalas semua(2)saya akan balas

  • P粉521748211

    P粉5217482112024-04-04 19:38:39

    Hanya menggunakan CSS dan mempunyai

    .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;
    }
    Logo cartão Mastercard Logo cartão Visa Logo cartão Elo Logo cartão Amex

    Menggunakan 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;
    }
    Logo cartão Mastercard Logo cartão Visa Logo cartão Elo Logo cartão Amex

    balas
    0
  • P粉799885311

    P粉7998853112024-04-04 14:44:15

    Anda boleh melakukan ini. Ini berfungsi dalam kebanyakan penyemak imbas. Firefox sepatutnya menyokongnya tidak lama lagi (https://caniuse.com/?search=has)

    .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;
        }
    Logo cartão Mastercard Logo cartão Visa Logo cartão Elo Logo cartão Amex

    balas
    0
  • Batalbalas