主页 / coding / 问题 / 78355169
Accepted
PhilM
Asked: 2024-04-20 00:43:50 +0800 CST

从子元素访问父div

  • 772

我有 2 个单选按钮。每个单选按钮都连接到一个图像。一开始这些图像是黑白的 ( filter:grayscale(1))。当选择这些按钮之一时，我希望与该按钮相关的图像变为 ( filter:grayscale(0))。过滤grayscale器属性在元素中指定<img>。每个单选按钮都包装在一个单独的 div 中，并带有各自的<img>.

第一步（我认为）是收集与所选单选按钮相关的输入名称。这有效。我相信从这个输入名称中，我需要搜索父 div，然后查找<img>与其相关的元素。

我承认，写这篇文章感觉有点复杂。但我想不出更好的办法。

我的问题

我现在挣扎的地方是根据检查的输入名称获取父 div。我找到了一些使用任一文档.parentElement()，.parent()但parent.Node()这些都不起作用。或者可能是我没有正确使用它们。然后，一旦确定了父 div，我就可以查找子<img>元素了。

我的问题

  1. 如何从子元素 id 访问父 div？
  2. 有没有更好的方法/更简单的方法来实现这一目标？

$(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 个回答

  1. Best Answer

    您可以完全不需要 jQuery 或 JavaScript 以及 CSS 单行代码来完成此操作，使用: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

相关问题