如何优化这个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代码？

回答

相关问题