Javascript 更改“的内容”；p"；及；img"；选择特定收音机时

我在javascript方面没有太多经验。但我有一个小滑块和一个灯箱，当选择一个特定的收音机时，它的内容应该会改变。例如，当选择带有

id=“id2”

的收音机时，灯箱的内容

 <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>

但是我不知道我应该如何使用“

p

”和“

img

”

谢谢你的帮助

像这样的

$('.modal img').attr('src','blopblop.jpg');
$('.modal p').text('blopblop');

---

您可以在单选按钮上使用数据属性，如下所示：

<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>

您可以使用$（选择器）.attr（'src'，'image source'）动态更改图像源，使用$（选择器）.text（'new_text'）动态更改段落p的内容

以下代码提供了3个单选按钮来执行所需的更改

$（文档）.ready（函数（）{
$（“#id2”）。关于（“更改”，函数（）{
如果（document.getElementById（“id2”）.checked）{//这将确认是否选中了单选按钮
//改变
$（'.modal img'）.attr（'src'，'img/blabla.jpg'）；//更改图像源
$（'.modal p'）.text（'blabla'）；//更改段落内容
}
});
//id3也是如此
$（“#id3”）。关于（“更改”，函数（）{
if（document.getElementById（“id3”）.checked）{
//更改图像和段落
$（'.modal img'）.attr（'src'，'img/blopblop.jpg'）；
$（'.modal p'）.text（'blopblop'）；
}
});
//对于id1-返回默认状态
$（“#id1”）。关于（“更改”，函数（）{
if（document.getElementById（“id1”）.checked）{
//更改图像和段落
$（'.modal img'）.attr（'src'，'img/blabla.jpg'）；
$（'.modal p'）.text（'blablabla'）；
}
});
});
布拉布拉
水滴
喋喋不休
喋喋不休

因此我创建了一个有效的解决方案。你可以把它改成你想要的

工作解决方案

var-rad=document.myForm.myRadios；
var-prev=null；
对于（变量i=0；i

布拉布拉
水滴

收音机在哪里？可能重复jquery中的look-at

text（）

和

.attr（）

方法有5个收音机，我用它们作为滑块。看起来像这样的“checked=“checked””只出现在默认选择的收音机上，而不是使用

.html（）

我会使用

.text（）

，但我喜欢你使用

数据属性的想法：）解释你的代码，它是什么？您更改、添加或删除了什么，或者为什么要使用此代码？：）id执行了完全相同的操作，但无法工作：/n是否其他“”会影响代码？是否在使用此脚本之前加载jquery？您能在这里生成代码的运行片段吗？id为“imgSrcP”的第一段可以删除。这用于说明img的正确src。
<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>

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