Question

我正在尝试创建一个过滤系统，用户可以使用多个类别过滤答案，但用户不能从每个类别中选择多个选项，因此在点击任何类别的选项时，类别将淡出...我有以下小问题，如果用户在淡出时点击同一类别中的另一个选项，他将能够从同一类别中选择两个选项...如何禁用任何当它消失时点击该类别？

以下是我正在使用的代码：

HTML：

<div class="search-list" id="program-list">
   <span class="search-title">Category 1</span>
   <a href="javascript:void(0)" class="search-option"><span data="program-list">Option 1</span></a>
   <a href="javascript:void(0)" class="search-option"><span data="program-list">Option 2</span></a>
   <a href="javascript:void(0)" class="search-option"><span data="program-list">Option 3</span></a>
   <a href="javascript:void(0)" class="search-option"><span data="program-list">Option 4</span></a>
   <a href="javascript:void(0)" class="search-option"><span data="program-list">Option 5</span></a>
   <a href="javascript:void(0)" class="search-option"><span data="program-list">Option 6</span></a>
</div> <!-- search-list -->

<div class="search-list" id="trainer-list">
    <span class="search-title">Category 2</span>
    <a href="javascript:void(0)" class="search-option"><span data="trainer-list">Option 1</span></a>
    <a href="javascript:void(0)" class="search-option"><span data="trainer-list">Option 2</span></a>
    <a href="javascript:void(0)" class="search-option"><span data="trainer-list">Option 3</span></a>
    <a href="javascript:void(0)" class="search-option"><span data="trainer-list">Option 4</span></a>
 </div> <!-- search-list -->

 <div class="search-list" id="issue-date">
     <span class="search-title">Category 3</span>
     <a href="javascript:void(0)" class="search-option"><span data="issue-date">Option  1</span></a>
     <a href="javascript:void(0)" class="search-option"><span data="issue-date">Option 2</span></a>
     <a href="javascript:void(0)" class="search-option"><span data="issue-date">Option 3</span></a>
     <a href="javascript:void(0)" class="search-option"><span data="issue-date">Option 4</span></a>
     <a href="javascript:void(0)" class="search-option"><span data="issue-date">Option 5</span></a>
     <a href="javascript:void(0)" class="search-option"><span data="issue-date">Option 6</span></a>
 </div> <!-- search-list -->

JQuery的：

   $('.search-option').click(function(){
       var x = $(this).html();
       $('#filtered-items').append(x);
       $(this).parent('.search-list').fadeTo('slow', 0);

       $('#filtered-items > span').click(function(){
          $('#'+$(this).attr('data')).fadeTo('slow', 100);
          $(this).hide();
           });
        });

我尝试使用以下JQuery代码，但它不起作用：

 $('.search-option').click(function(e) {
            e.preventDefault();
       });

提前致谢...

Answer 1

您可以在功能中设置指示器：

$('.search-option').click(function(){
   if(indicator) {
     return false
   }
...
}

指示符在淡入淡出开始时设置，在结束时清除。它可能是：

一个javascript变量，
或 - 您可以检查当前的不透明度，
或 - 或者您可以在淡入淡出期间设置/清除班级名称。

Answer 2

尝试：

$('.search-option').click(function(){
  var x = $(this).html();
  $('#filtered-items').append(x);

  // ADDED LINES  
  $(this).parent('.search-list').find('a').each(function(){
    $(this).click(function(){return false;});
  });
  // END: ADDED LINES   

  $(this).parent('.search-list').fadeTo('slow', 0);

  $('#filtered-items > span').click(function(){
    $('#'+$(this).attr('data')).fadeTo('slow', 100);
    $(this).hide();
  });
});

Answer 3

点击后，只需从类别中的所有选项中删除“搜索选项”类。

Answer 4

一旦触发，您可以将click事件设置为null：

$('.search-option').click(function(){
   $(this).click(null); // set click to do nothing on the clicked element
   var x = $(this).html();
   $('#filtered-items').append(x);
   $(this).parent('.search-list').fadeTo('slow', 0);

   $('#filtered-items > span').click(function(){
      $('#'+$(this).attr('data')).fadeTo('slow', 100);
      $(this).hide();
   });
});

这将仅关闭特定点击元素上的点击操作，以便其他过滤器将继续有效，直到每个过滤器都被选中一次。如果您想在所有事情发生后重新启用点击功能，您可以保存该功能，禁用它，然后在下面重新启用，如下所示：

$('.search-option').click(function(){
   var fun = $(this).click;
   $(this).click(null); // set click to do nothing on the clicked element

   // OTHER CODE

   $(this).click(fun);
});

Answer 5

由于这一切都取决于用户点击具有“search-option”类的元素，因此在开始淡入淡出之前从元素及其兄弟中删除该类，然后在淡入淡出运行后使用回调恢复它。这样，没有人可以点击两次：

   $('.search-option').click(function() {
        var x = $(this).html();
        $('#filtered-items').append(x);
        $(this).parent().children().removeClass('search-option');
        $(this).parent('.search-list').fadeTo('slow', 0, function() {
             $(this).children().addClass('search-option');
        });
   });

Answer 6

嘿大家......我终于解决了，我不得不改变函数的整个结构并使用方法“unbind”和“bind”...如果有人对它感兴趣，这是解决方案：

        $('.search-option').click(work);

    });

 function work(){


                var x = $(this).html();     

                $('#filtered-items').append(x);

                $(this).unbind('click');
                $(this).siblings('a').unbind('click');

                $(this).parent('.search-list').fadeOut('slow');

        $('#filtered-items > span').click(function(){
                $('#'+$(this).attr('data')).fadeIn('slow');
                $('#'+$(this).attr('data')).children('a').bind('click',work );
                $(this).remove();
                });

            };

现在，用户无法在每个类别中选择多个选项....

防止用户在淡出时单击div

6 个答案: