javascript - 切换可过滤的 div

Question

我有许多带有数据属性的链接可以过滤 div。过滤在点击时启用，然后在再次点击时禁用(返回显示所有 div)。过滤工作正常，但如果单击(启用)一个链接然后单击另一个链接，我希望显示下一个相应的 div，并防止所有 div 显示，直到单击一次链接再次。
我怎样才能做到这一点？

var enabled = false;

$('.show-div').click(function(e) {

   enabled = !enabled;

   if(enabled) {
      $('.result-div').hide();
      $('#div' + $(this).attr('data-target')).show();
   }else {
      $('.result-div').show();
   }   

});

HTML:

<a class="show-div" data-target="1">Div 1</a>
<a class="show-div" data-target="2">Div 2</a>
<a class="show-div" data-target="3">Div 3</a>
<a class="show-div" data-target="4">Div 4</a>

<div id="div1" class="result-div">Result 1</div>
<div id="div2" class="result-div">Result 2</div>
<div id="div3" class="result-div">Result 3</div>
<div id="div4" class="result-div">Result 4</div>

fiddle

Answer 1

只显示再次点击相同的元素。所以保存target值然后匹配current和prev被点击的元素target值

已更新，带有切换

$(function() {
  var target;

  $('.show-div').click(function(e) {
    e.preventDefault();;

    if (target != $(this).attr('data-target')) {
      $('.result-div').hide();
      $('#div' + $(this).attr('data-target')).show();
      target = $(this).attr('data-target')

    } else {
      $('.result-div').show();
      target ='';
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="show-div" data-target="1">Div 1</a>
<a class="show-div" data-target="2">Div 2</a>
<a class="show-div" data-target="3">Div 3</a>
<a class="show-div" data-target="4">Div 4</a>


<div id="div1" class="result-div">Result 1</div>
<div id="div2" class="result-div">Result 2</div>
<div id="div3" class="result-div">Result 3</div>
<div id="div4" class="result-div">Result 4</div>