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>

Answer 2

您可以使用解决方案https://jsfiddle.net/vkjLrbxc/3/

＆＃13;

$(function() {
	var prevClick = 0;
  $('.show-div').click(function(e) {
  	 e.preventDefault();
    
     if(parseInt($(this).attr('data-target')) !== parseInt(prevClick)) {
        $('.result-div').hide();
      	$('#div' + parseInt($(this).attr('data-target'))).show();
        prevClick = parseInt($(this).attr('data-target'));
     }else {
        prevClick = 0;
        $('.result-div').show();
     }
   });
});

＆＃13;

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

＆＃13;

Answer 3

只需将您的enabled值更改为数据目标

即可

var enabled = false;

$('.show-div').click(function(e) {
   if(enabled== $(this).attr('data-target')) {
$('.result-div').show(); 
  }else {
  $('.result-div').hide();
  $('#div' + $(this).attr('data-target')).show();
  enabled = $(this).attr('data-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>

切换可过滤的div

3 个答案: