Início / coding / Perguntas / 78355169
Accepted
PhilM
Asked: 2024-04-20 00:43:50 +0800 CST

Acessando div pai do elemento filho

  • 772

Eu tenho 2 botões de opção. Cada um desses botões de opção está conectado a uma imagem. No início estas imagens estão em preto e branco ( filter:grayscale(1)). Quando um desses botões é selecionado, quero que a imagem à qual o botão se refere gire ( filter:grayscale(0)). O grayscaleatributo filter é especificado no <img>elemento. Cada um desses botões de opção é agrupado em uma div separada, com seus respectivos arquivos <img>.

O primeiro passo (eu acho) é coletar o nome de entrada relacionado ao botão de opção selecionado. E isso funciona. Acredito que a partir desse nome de entrada, preciso procurar a div pai e, em seguida, procurar o <img>elemento ao qual ela se relaciona.

Eu admito, escrever isso parece um pouco complicado. Mas não consigo pensar em uma maneira melhor.

meu problema

O que estou lutando agora é buscar o div pai com base no nome de entrada verificado. Encontrei um pouco de documento usando .parentElement(), .parent()mas parent.Node()nada disso funciona. Ou provavelmente não os estou usando corretamente. Então, uma vez identificado o div pai, provavelmente poderei procurar o <img>elemento filho.

Minhas perguntas)

  1. Como faço para acessar o div pai a partir do ID do elemento filho?
  2. Existe uma maneira melhor/mais simples de conseguir isso?

$(document).ready(function() {
  /*Manages Radio buttons & images rendering when clicked*/
  $('input[name="hero-avatar"]').change(function() {
    // Check if the radio button is checked
    if ($(this).is(':checked')) {
      // captures id of button that is checked
      let checkButton = $(this).attr('id');
      // Log checked radio button id
      console.log(checkButton);

      //test to find parent div class
      console.log($(`#${checkButton}`).parent().attr('class'));

      //this works but doesnt reach the parent div class which contains grayscale property
      $(`#${checkButton}`.parentNode).css('filter', 'grayscale(0)')

    }
  });

  //if radio button is checked
  //change colour of image attached to it
});
.avatar-img-select {
  height: 52px;
  filter: grayscale(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row first-screen-row-avatar">
  <div class="col select-avatar-col">
    <label for="avatar1">
        <img src="assets/images/avatars/hero-avatar-1.jpg" class="avatar-img-select" alt="Avatar 1">
        <input type="radio" id="avatar1" name="hero-avatar" value="assets/images/avatars/hero-avatar-1.jpg" required>
    </label>
  </div>
  <div class="col select-avatar-col">
    <label for="avatar2">
        <img src="assets/images/avatars/hero-avatar-2.webp" class="avatar-img-select" alt="Avatar 2">
        <input type="radio" id="avatar2" name="hero-avatar" value="assets/images/avatars/hero-avatar-2.webp" required>
    </label>
  </div>
</div>

javascript

1 respostas

  1. Best Answer

    Você pode fazer isso inteiramente sem jQuery ou JavaScript e uma linha CSS usando :has():

    label:has(input:checked) img {
  filter: grayscale(0);
}


    label:has(input:checked) img {
  filter: grayscale(0);
}
.avatar-img-select {
  height: 52px;
  filter: grayscale(1);
}
    <div class="row first-screen-row-avatar">
  <div class="col select-avatar-col">
    <label for="avatar1">
        <img src="assets/images/avatars/hero-avatar-1.jpg" class="avatar-img-select" alt="Avatar 1">
        <input type="radio" id="avatar1" name="hero-avatar" value="assets/images/avatars/hero-avatar-1.jpg" required>
    </label>
  </div>
  <div class="col select-avatar-col">
    <label for="avatar2">
        <img src="assets/images/avatars/hero-avatar-2.webp" class="avatar-img-select" alt="Avatar 2">
        <input type="radio" id="avatar2" name="hero-avatar" value="assets/images/avatars/hero-avatar-2.webp" required>
    </label>
  </div>
</div>

    • 1

relate perguntas