重复代码简化方法

Question

我正在练习HTML。 代码必须太长并且重复。 有没有简单的方法来减少它？

谢谢。

$(".sbox1  #sim2_o").click(function(){
$(".sbox1 .ori").hide();
$(".sbox1 .cg2").hide();
$(".sbox1 .cg3").hide();
$(".sbox1 .cg1").hide();
$(".sbox1 .cg2").show();
 });

有没有办法使用兄弟（）？

因为我必须使用很多。

I think you'd better watch it here.
<section class="section1">
<div class="swrap">

    <div class="sbox1">
        <img src="strap/sim1.jpg" alt="sim1.jpg" class="ori">
        <div class="cg cg1"><img src="strap/sim1.jpg" alt="sim1.jpg"></div>
        <div class="cg cg2"><img src="strap/sim2.jpg" alt="sim2.jpg"></div>
        <div class="cg cg3"><img src="strap/sim3.jpg" alt="sim3.jpg"></div>
        <p>Pingo Color Flower Set White</p>
        <p><span id="sim1_b" style="color:#69BDE1;">■</span>
        <span id="sim2_o" style="color:#FE7B52 ;">■</span>
        <span id="sim3_p" style="color:#F35B75 ;">■</span>  </p>

    </div><!-- sbox1 -->

Answer 1

你可以这样做

$(".sbox1  #sim2_o").click(function(){
    $(".sbox1 .ori, .sbox1 .cg2, .sbox1 .cg3, .sbox1 .cg1").hide();
    $(".sbox1 .cg2").show();
});

Answer 2

这对你有用吗？

根据您提供的HTML标记，您可以导航到父节点并隐藏所有img和div元素，并仅显示您想要的元素。

$(".sbox1  #sim2_o").click(function () {
    $(this).parent().parent().find("img, div").not(".cg2").hide();
    //or
    $(this).closest(".sbox1").find("img, div").not(".cg2").hide();
});