javascript - 如何给所有 anchor 标签设置点击事件，并用less脚本显示相关div？

Question

我有超过 4 个 anchor 标签。

例如:

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

每个 anchor 标签都有一个点击事件，会显示相关的 div 图片。

<div class="click_content_1">
    <img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg">
</div>

<div class="click_content_2">
    <img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg">
</div>


<div class="click_content_3">
    <img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg">
</div>


<div class="click_content_4">
    <img src="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg">
</div>

在页面加载时，我隐藏了 div

  $(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 me 1”时，它将显示图像。

现在我的问题是，如何为所有 anchor 标签设置点击事件并用更少的脚本显示相关的div？但隐藏前一个。

$(document).ready(function() {
  $(".click_content_1,.click_content_2,.click_content_3,.click_content_4").hide();
  $(".open_popup").click(function() {
    $(".click_content_1").show();
  });
});

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

<div class="click_content_1">
  <img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg">
</div>

<div class="click_content_2">
  <img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg">
</div>


<div class="click_content_3">
  <img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg">
</div>


<div class="click_content_4">
  <img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg">
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>

Answer 1

检查下面更新的片段....

$(".open_popup").click(function() {
    $($(this).data('rel')).show().siblings(".contentBox").hide();
});

.contentBox {
    display: none;
}

<div>
  <a href="javascript:void(0);" data-rel=".click_content_1" class="open_popup">Click me 1</a>
  <a href="javascript:void(0);" data-rel=".click_content_2" class="open_popup">Click me 2</a>
  <a href="javascript:void(0);" data-rel=".click_content_3" class="open_popup">Click me 3</a>
  <a href="javascript:void(0);" data-rel=".click_content_4" class="open_popup">Click me 4</a>
</div>

<div class="click_content_1 contentBox">1
  <img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/1m.jpg">
</div>

<div class="click_content_2 contentBox">2
  <img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/2m.jpg">
</div>


<div class="click_content_3 contentBox">3
  <img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/3m.jpg">
</div>


<div class="click_content_4 contentBox">4
  <img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg">
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>