Javascript 如何将click事件设置为所有锚定标记，并以较少的脚本显示相关的div？

我有超过4个锚标签

例如：

<div>
    <a href="javascript:void(0);" class="open_popup">Click me 1</a>
    <a href="javascript:void(0);">Click me 2</a>
    <a href="javascript:void(0);">Click me 3</a>
    <a href="javascript:void(0);">Click me 4</a>
</div>

现在，当用户单击“ClickMe1”时，它将显示图像

现在我的问题是，如何将click事件设置为所有锚定标记，并用更少的脚本显示相关的div？但是要隐藏上一个

$（文档）.ready（函数（）{
$（“。单击内容1、。单击内容2、。单击内容3、。单击内容4”）.hide（）；
$（“.open_popup”）。单击（函数（）{
$（“.click_content_1”）.show（）；
});
});


var header=document.getElementById（“myDIV”）；
var btns=header.getElementsByTagName（“btn”）；
对于（变量i=0；i}
检查下面更新的代码段


$（“.open_popup”）。单击（函数（）{
$（$（this.data（'rel'））.show（）同级（“.contentBox”）.hide（）；
});
.contentBox{
显示：无；
}

1.
2.
3.
4.
将一个公共类添加到锚（从技术上讲，您可以使用$（'a'），但这并不好）和它们应该显示的元素中。在本例中，我使用“单击”作为第一个选项，使用“单击内容”作为其他选项。创建一个“类命名系统”。然后我会这样做：

$('.click_content').hide();

$('.to_click').each(function(idx) { $(this).click(function() {
  $('.click_content_'+idx).show();
});

我不会使用兄弟姐妹或孩子，除非你绝对确定你的HTML的结构，并且在不久的将来你不会改变它，并且你不会创建代码，这些代码将被使用很长一段时间，可能会在两年内重新编码-但如果你这样做，思考过程将是一样的

试试这个。。通过使用锚定标记的
data
属性更新html，并使用一个公共类来单击内容


$（文档）.ready（函数（）{
$（“.click_content”）.hide（）；//隐藏所有内容div
$（“.open_popup”）。单击（函数（）{
$（“.click_content”）.hide（）；//隐藏所有内容div
var dataTarget=$（this）.attr（'data-target'）；//从数据属性获取目标元素
$（“+dataTarget）.show（）；//显示与锚点标记相关的div
});
});

我知道这适用于问题中的代码，但如果链接以不同的顺序结束，它将停止工作。我只是不喜欢使用索引来识别其他元素。@Archer是的，我同意你的观点，如果我不想快速回答，也不想从代码中去想的话，我也不会这么做。是有点被原始代码抛弃了，因为在第二个位置有一个元素和一个数量较少的类对我来说没有意义。不管怎样，我都会留下答案，因为在你的评论中，我实际上认为如果有人偶然发现这个问题，这会很有帮助。更好的是，你可以使用链接索引（eq），因此如果链接是列表中的第三个，您将寻找的div也是池中的第三个。@Ravenous此解决方案更安全，更易于维护。@Archer，我得到了一个四个答案，现在我不知道哪一个是最好的。这方面有什么帮助吗？@Ravenous此解决方案提供动态目标div标识符，您可以在源代码中设置目标div选择器tag@user9437856它是与链接关联的图像的类名。基本上，“单击此链接时显示此图像”
  $(document).ready(function(){   
$(".click_content_1,.click_content_2,.click_content_3,.click_content_4").hide(); 
          $(".open_popup").click(function(){
            $(".click_content_1").show();
             });
        });

$('.click_content').hide();

$('.to_click').each(function(idx) { $(this).click(function() {
  $('.click_content_'+idx).show();
});