如何優化這個javascript代碼？

如何優化這個功能？我可以爲所有操作製作一個功能嗎？如何優化這個javascript代碼？

$('#b-hat1').click(function() { 
 
    $('#hat3').hide(); 
 
    $('#hat2').hide(); 
 
    $('#hat1').show(); 
 
}); 
 
$('#b-hat2').click(function() { 
 
    $('#hat3').hide(); 
 
    $('#hat2').show(); 
 
    $('#hat1').hide(); 
 
}); 
 
$('#b-hat3').click(function() { 
 
    $('#hat3').show(); 
 
    $('#hat2').hide(); 
 
    $('#hat1').hide(); 
 
});

來源

2017-02-23 nueq

不使用添加HTML標記 – guradio

能否請您添加HTML代碼的問題，所以我們可以看到'＃B-hatX'如何與'＃hatX'元素 –

添加HTML代碼 –

沒有你的HTML，我只能給你關於如何解決它「rought」的想法。

$("div[id^='hat']").hide();隱藏所有div的與hat

$('div[id^="b-hat"]').click(function() { 
 
    var id = $(this).attr("id").replace("b-",""); 
 
    $("div[id^='hat']").hide(); 
 
    $('#' + id).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hat1">hat1</div> 
 
<div id="hat2">hat2</div> 
 
<div id="hat3">hat3</div> 
 
<br><br> 
 

 
<div id="b-hat1">Show hat1</div> 
 
<div id="b-hat2">Show hat2</div> 
 
<div id="b-hat3">Show hat3</div>

來源

2017-02-23 09:07:46

做這個運算符'^ ='是什麼？ – nueq

'^ ='in'id^='hat'意味着它需要所有以「hat」開頭的'id's' –

是否有這樣的運算符列表？將有助於知道。順便說一下，爲什麼你沒有使用數據屬性 – sinhavartika

開始只點擊特定按鈕 DEMO後，將顯示在div：

$(document).ready(function(){ 
 
$(".hat").hide(); 
 
    $(".clickMe").on("click",function(){ 
 
     var showDiv = $(this).data("id");  
 
     $(".hat").hide(); 
 
     $("#hat_"+showDiv).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<button class="clickMe" data-id="1" type="button">1</button> 
 
<button class="clickMe" data-id="2" type="button">2</button> 
 
<button class="clickMe" data-id="3" type="button">3</button> 
 

 
<div id="hat_1" class="hat">hat_1</div> 
 
<div id="hat_2" class="hat">hat_2</div> 
 
<div id="hat_3" class="hat">hat_3</div>

來源

2017-02-23 09:10:18

如何優化這個javascript代碼？

回答

相關問題