如何优化这个javascript代码？答案

【问题标题】：how to optimize this javascript code?如何优化这个javascript代码？
【发布时间】：2017-07-13 15:52:00
【问题描述】：

如何优化这个功能？我可以为所有操作创建一个函数吗？

$('#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();
});

【问题讨论】：

能否将您的 HTML 代码添加到问题中，以便我们了解 #b-hatX 与 #hatX 元素的关系
添加您的 HTML 代码
可能是因为一开始就没有使用 ID（这就是为什么要求您使用 HTML，因为它是最相关的部分）。

标签： javascript jquery optimization

【解决方案1】：

没有你的 html，我只能给你一个关于如何解决它的“粗略”想法。

$("div[id^='hat']").hide();隐藏所有以hat开头的div

$('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>

【讨论】：

这个操作符'^='做什么？
^= 中的id^='hat 意味着它需要所有以“帽子”开头的id's
是否有此类运算符的列表？知道会很有帮助。顺便问一下为什么不使用数据属性
@sinhavartika 这里有一个列表api.jquery.com/category/selectors 当您可以轻松创建操作所需的内容时，没有理由使用数据属性
数据属性没有问题，但如果不需要它们，我看不出有理由使用它们

【解决方案2】：

只有在点击特定按钮后才会显示 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>

【讨论】：

这应该是批准的答案