防止用户在div褪色时单击div

Question

I'm trying to create a filtering system where the user can filter for answers using more than one category, but the user can't choose more than one option from each category, so upon clicking an option from any category, that category will fade out ... I have the following little problem, if the user clicks on another option from the same category while it's fading out, he will be able to choose two options from the same category ... How can I disable any click on the category when it's fading out ??

Here is the code I'm using:

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

I tried using the following JQuery code but it didn't work:

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

Thanks in advance...

Answer 1

You can set an indicator in your function:

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

The indicator is something set when the fade starts and clears when it ends. It could be:

• a javascript variable,

• or - you can check the current opacity,

• or - or you can set/clear a class name during the fade.

Answer 2

Try:

$('.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

You can set the click event to null once it has fired:

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

This will only turn off the click action on the specifically clicked element so your other filters will continue to work until each of them has been selected once. If you want to re-enable the click function after everything has happened you can save the function, disable it, then re-enable at the end as below:

$('.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

Since this all hinges on the user clicking on an element with the class "search-option", just remove that class from the element and its siblings before starting the fade and then restore it with a callback after the fade runs. That way, nobody can click twice:

   $('.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

Hey everyone ... I finally solved it, I had to change the whole structure of the function and use the methods "unbind" and "bind" ... Here is the solution if anyone is interested in it:

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

            };                  

Now the user can't choose more than one option at each category ....