如何优化这段JavaScript代码？

Question

如何优化这些函数？我能否创建一个函数用于所有操作？

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

- nueq

---

你能否将你的HTML代码添加到问题中，这样我们就可以看到#b-hatX与#hatX元素有何关系？ - Rory McCrossan

请添加您的HTML代码 - Alive to die - Anant

可能是因为一开始没有使用ID（这就是为什么要求HTML，因为它是最相关的部分）。 - Álvaro González

Answer 1

没有你的HTML，我只能给你一个"粗略的"解决方案。

$("div[id^='hat']").hide(); 隐藏了所有以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>

- Carsten Løvbo Andersen

---

这个运算符'^='是做什么用的？ - nueq

^= 在 id^='hat' 中表示匹配所有以 "hat" 开头的 id。 - Carsten Løvbo Andersen

@CarstenLøvboAndersen 谢谢.. 用数据属性做这个是否是一种好的实践方法？我只是想知道.. 因为以前我经常这样做。 - sinhavartika

数据属性本身没有问题，但如果不需要使用它们，我不认为有理由使用它们。 - Carsten Løvbo Andersen

好的，@CarstenLovboAndersen，***=*是否和^=**一样起作用？ - user8590818

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

- Anil Panwar

---

这应该是批准答案。 - Deepak A