Question

我正在尝试在选择单选按钮时使用javascript点亮图像。

我使用forEach函数进行了尝试，但是使用给出的代码，所有图像都变为不透明度1；

此外，当我刷新页面时，单选按钮仍处于选中状态。

let img = document.querySelectorAll('.poll_img');
    let radio = document.querySelectorAll('.radio_button');

    radio.forEach(radioButton => {
        if (radioButton.checked = true){
            img.forEach(image => {
                image.style.opacity = 1;
            })
        }
    })

<form class="poll_form" action="">
  <div class="poll_bar">
    <img class="poll_img poll_img1" src="assets/images/poll_bar-icon.svg" alt="">
    <label class="radio_title" for="radio1">Atlantic Forest, South America
    </label><input class="radio_button" type="radio" name="group1" id="radio1">
    <div class="check"></div>
  </div>

  <div class="poll_bar">
    <img class="poll_img  poll_img2" src="assets/images/poll_bar-icon.svg" alt="">

    <label class="radio_title" for="radio2">Borneo Island, Southeast Asia
    </label><input class="radio_button" type="radio" name="group1" id="radio2">
    <div class="check"></div>
  </div>
</form>

Answer 1

在JS =中用于分配，而不用于比较。您需要使用==。

条件（JS代码中的第5行）应为

if (radioButton.checked == true) {...

或者只是

if (radioButton.checked)

Answer 2

您将希望设置事件侦听器以在每次选择单选按钮时运行函数，而不是在JS第一次运行时遍历按钮并随后设置样式。

我怀疑您也不想遍历所有图像，而是更改与特定单选按钮一起显示的图像的不透明度。

radio.forEach(r => {
  r.addEventListener("click", () => {
    let relatedImg = r.parentNode.querySelector("img");
    relatedImg.style.opacity = 1;
  }
})

如果只希望当前选择的图像具有完全的不透明度，则还需要在事件中运行将不透明度重新设置为0或其他所有图像的功能。

编辑：执行此操作的简单方法可能是这样的。

radio.forEach(r => {
  r.addEventListener("click", () => {
    let relatedImg = r.parentNode.querySelector("img");
    updateImages(relatedImg);
  }
})

function updateImages(changedImg) {
  img.forEach(image => {
    if (image === changedImg) {
      image.style.opacity = 1;
    } else {
      image.style.opacity = 0;
    }
  }
}

Answer 3

        let radio = document.querySelectorAll('.radio_button');


    radio.forEach(r => {
        r.addEventListener("click", changeOpacity)
    });

}

changeOpacity = r => {
    const radio = r.currentTarget;
    let relatedImg = radio.parentNode.querySelector('img');
    relatedImg.style.opacity = 1;

    if(radio.checked == false){
        relatedImg.style.opacity = 0.3;
    }
}

改变不透明度是可行的，但是一旦选中，图像不会降低

Answer 4

您必须为广播输入分配一个事件，您可以使用两种方法来实现

1。首先

将js代码包含在一个函数中，并在HTML上调用此函数 HTML：

<form class="poll_form" action="">
    <div class="poll_bar">
      <img class="poll_img poll_img1" src="picture.png" alt="">
      <label class="radio_title" for="radio1">Atlantic Forest, South America
      </label><input onchange="lightUpPic()" class="radio_button" type="radio" name="group1" id="radio1">
      <div class="check"></div>
    </div>

    <div class="poll_bar">
      <img class="poll_img  poll_img2" src="picture.png" alt="">

      <label class="radio_title" for="radio2">Borneo Island, Southeast Asia
      </label><input onchange="lightUpPic()" class="radio_button" type="radio" name="group1" id="radio2">
      <div class="check"></div>
    </div>
  </form>

JS：

function lightUpPic(){
let img = document.querySelectorAll('.poll_img');
    let radio = document.querySelectorAll('.radio_button');
    radio.forEach(radioButton => {
        if (radioButton.checked == true){
            img.forEach(image => {
                image.style.opacity = 1;
            })
        }
    })
}

2。第二

要将事件监听器（addEventListener）添加到您的无线电输入中，以在单击时执行所需的JS

Answer 5

由于迈尔斯·格罗弗（Miles Grover），我终于明白了。

{
const init = () => {

    let radiobutton = document.querySelectorAll('.radio_button');


    radiobutton.forEach(r => {
        r.addEventListener("change", changeOpacity);
    });


}

changeOpacity = r => {
    const radio = r.currentTarget;
    let relatedImg = radio.parentNode.querySelector('img');
    relatedImg.style.opacity = 1;

    unsetOpacity();
}

const unsetOpacity = () => {
    let radiobutton = document.querySelectorAll('.radio_button');
    radiobutton.forEach(r => {
        if(r.checked == false){
            let relatedImg = r.parentNode.querySelector('img');
            relatedImg.style.opacity = 0.1;
        }
    })
}

init();

}

Answer 6

尝试一下：它可以达到以下目的

页面加载时所有图片的不透明度= 0.3
在选择单选按钮1时，图片1的不透明度= 1，其余部分= 0.3
在选择单选按钮2时，图片2的不透明度= 1，休息= 0.3 ..等等

HTML：

<form class="poll_form" action="">
    <div class="poll_bar">
      <img class="poll_img  poll_img1" src="picture.png" alt="">
      <label class="radio_title" for="radio1">Atlantic Forest, South America
      </label><input onchange="lightUpPic(event)" class="radio_button" type="radio" name="group1" id="radio1">
      <div class="check"></div>
    </div>

    <div class="poll_bar">
      <img class="poll_img  poll_img2" src="picture.png" alt="">

      <label class="radio_title" for="radio2">Borneo Island, Southeast Asia
      </label><input onchange="lightUpPic(event)" class="radio_button" type="radio" name="group1" id="radio2">
      <div class="check"></div>
    </div>
  </form>

JS：

    let allImages = document.querySelectorAll('.poll_img');
allImages.forEach(i=> i.style.opacity=0.3);

function lightUpPic(evt){
    let imageNumber = evt.target.id.replace( /^\D+/g, '');
    let imgAssigned = document.querySelectorAll('.poll_img' + imageNumber);

    let radio = document.querySelectorAll('.radio_button');
    radio.forEach(radioButton => {
        if (radioButton.checked == true){
            allImages.forEach(image => {
                image.style.opacity = 0.3;
            })
            imgAssigned[0].style.opacity=1;

        }
    })
}

如何：单选按钮更改图像的不透明度

6 个答案: