重複代碼簡化方法

我正在練習html。代碼必須太長並重復。有沒有簡單的方法來減少它？重複代碼簡化方法

謝謝。

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

有什麼辦法可以使用sibling（）嗎？因爲我不得不使用它們中的很多。

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

來源

2017-09-21 daun

$（「.sbox1 .ori，.sbox1 .cg2，.sbox1 .cg3，.sbox1 .cg1」）。hide（）; $（「。sbox1 .cg2」）。show（）; – rafon

或者你可以給我你的樣本標記（HTML）？ – rafon

我將它添加到問題中。 – daun

你可以這樣做

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

來源

2017-09-21 03:38:26 Wis

有沒有什麼方法可以使用sibling（）？因爲我必須使用它們中的很多。 – daun

你能告訴我你的html代碼嗎？ – Wis

我將它添加到問題中。 – daun

請問

這對你的工作？

根據您提供的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(); 
});

來源

2017-09-21 04:21:37

對不起。感謝您的回覆，但它不起作用。 – daun

重複代碼簡化方法

回答

相關問題