javascript - 选择特定 radio 时更改 "p"和 "img"的内容

Question

我在 javascript 方面没有太多经验。但我有一个小 slider 和一个灯箱，当选择特定 radio 时，其内容应该会发生变化。例如，当选择带有 id="id2" 的 radio 时，灯箱的内容

 <div class="modal">
     <div class="modal__inner">
        <label class="modal__close" for="modal-1"></label>
            <img src="img/blabla.JPG">
            <p>blablabla</p>
     </div>
</div>

应该是"blabla" 和图像的来源"img/blabla.jpg"。

但现在当我选择带有 id="id3" 的第二个 radio 时，内容应该是 "blopblop" 和图像的来源 "img/blopblop.jpg"...

这可能吗？ 我的网站上已经有一个代码，它会在选择特定 radio 时更改链接的 href:

 function myFunction() {
       if(document.getElementById('id2').checked) {
       document.getElementById('myLink').href = "infografik.html";
}

但我不知道如何使用“p”和“img”...

感谢您的帮助!

Answer 1

您可以像这样在单选按钮上使用数据属性:

<form>
  <input type="radio" class="changemodal" data-src="/my/img/1.jpg" data-p="Foo!">
  <input type="radio" class="changemodal" data-src="/my/img/2.jpg" data-p="Bar!">
</form>

<div class="modal">
  <img id="modal_img" src="">
  <p id="modal_p"></p>
</div>

然后您可以在 jQuery 中使用这些属性:

$('.changemodal').click(function(){
    $('#modal_img').attr('src', $(this).attr('data-src'));
    $('#modal_p').html($(this).attr('data-p'));
});