反复使用切换

Question

我正在使用每个div部分切换以显示图像。它工作正常，但现在代码重复。我该怎么做这个干？

// Show hide Maps
$( ".secblue" ).click(function() {
  $( "#mgmap" ).toggle( "slow" );
});

// Show hide Maps
$( ".secgreen" ).click(function() {
  $( "#glmap" ).toggle( "slow" );
});

// Show hide Maps
$( ".secpurple" ).click(function() {
  $( "#ufmap" ).toggle( "slow" );
});

// Show hide Maps
 $( ".secorange" ).click(function() {
  $( "#llmap" ).toggle( "slow" );
});

Answer 1

在每个按钮上添加data-target属性（或锚点或div或您点击的元素是什么）：

<button class="secblue" data-target="mgmap">...</button>
<button class="secgreen" data-target="glmap">...</button>
...

然后只订阅具有此data-target属性的所有元素的click事件，抓取相应的目标元素并切换它：

$('button[data-target]').click(function() {
    var target = $(this).data('target');
    $('#' + target).toggle('slow');
});