Javascript 在jQuery函数问题中使用id两次

请帮助处理jQuery：

单选按钮1和2使用具有相同id的图片，但它们应打开具有不同文本的块

在我的例子中，按钮1不加载图片，第二个按钮工作正常。问题可能是什么？如何解决

我试着在课堂上做到这一点，但效果不太好

$（文档）.ready（函数（）{
$（'.radiobuttons'）.change（函数（）{
if（$（'#item1'）.prop（'checked'））{
$（'.img2，#text1'）.show（）；
}否则{
$（'.img2，#text1'）.hide（）；
}
if（$（'#item2'）.prop（'checked'））{
$（'.img2，#text2'）.show（）；
}否则{
$（'.img2，#text2'）.hide（）；
}
如果（$（'#item3'）.prop（'checked'））{
$（'.img3，#text3'）.show（）；
}否则{
$（'.img3，#text3'）.hide（）；
}
});
});

文本1

文本2

文本3

Lorem Ipsum Text1
Lorem Ipsum Text2
Lorem Ipsum Text3
你会这样尝试吗



标题
文本1

文本2

文本3

Lorem Ipsum Text1
Lorem Ipsum Text2
Lorem Ipsum Text3
$（文档）.ready（函数（）{
$（'input[type=“radio”]”）。更改（函数（）{
$（'.text，.img'）.hide（）；
var$pic=$（'#'+$（this.data（'picid'））；
var$text=$（'#'+$（this.data（'textid'））；
if（$（this.prop（'checked'））{
$pic.show（）；
$text.show（）；
}否则{
$pic.hide（）；
$text.hide（）；
};
});
});
由于图像、收音机和文本都使用相同的索引，您可以通过确保它们都有公共类来简化索引。为每个项目使用唯一类并不常见

然后可以使用显示/隐藏匹配的组件


$（文档）.ready（函数（）{
var$radios=$（'.radiobutton:radio'）.change（function（）{
var idx=$radios.index（此）；
$（'.text'）.hide（）.eq（idx.show（）；
$（'.img'）.hide（）.eq（idx.show（））
});
//在页面加载时触发第一个收音机
$radios.first（）.prop（'checked'，true）.change（）
});

标题
文本1

文本2

文本3

Lorem Ipsum Text1
Lorem Ipsum Text2
Lorem Ipsum Text3
我知道发生了什么

这是您进入第一个if状态以显示img2

然后，您将进入第二个if/else条件，它将立即隐藏img2

您可以在每个if语句中添加返回

  YOU'RE GOING IN HERE.. GOOD
 if ($('#item1').prop('checked')) {
    $('.img2, #text1').show();
} else {
    $('.img2, #text1').hide();
}

 THEN YOU'RE GOING INTO THIS 'ELSE' AFTER...  BAD
  if ($('#item2').prop('checked')) {
    $('.img2, #text2').show();
} else {
    $('.img2, #text2').hide();
}

如果您在这里有另一个级别的ELSE以确保仅使用了1 If/ELSE，那么您的逻辑应该工作正常。
我想使用
类

我希望这段代码对您有所帮助

不能有多个id相同的元素。@epascarello这里有类-仍然没有解决检查代码，item1'=>select.img2，我想应该是这样的img1@VictorXie抱歉，没有。我已经在帖子中编辑了代码，以使其更准确clear@Anton请看我的答案，你已经非常接近了，这是解决OP所要求的代码问题的正确方法。这不应该有任何反对票。
  YOU'RE GOING IN HERE.. GOOD
 if ($('#item1').prop('checked')) {
    $('.img2, #text1').show();
} else {
    $('.img2, #text1').hide();
}

 THEN YOU'RE GOING INTO THIS 'ELSE' AFTER...  BAD
  if ($('#item2').prop('checked')) {
    $('.img2, #text2').show();
} else {
    $('.img2, #text2').hide();
}