Comment supprimer l'événement précédent?

Question

me dire ce que je dois corriger, au clic répété sur une autre cellule TR événements antérieurs sont supprimés

Full example

$('table tbody tr').each(function() { 
    $('table tr:even').addClass('even'); 

    $(this).hover(function(){ 
     $(this).toggleClass("active"); 
    }); 

    $(this).click(function(){ 
     $(this).closest('tr').toggleClass('visited'); 
    }) 

}); 

Answer 1

Vous pouvez le faire en ajoutant simplement un peu à votre courantgestionnaire, comme ceci:

$(this).click(function(){ 
    $(this).closest('tr').toggleClass('visited').siblings().removeClass('visited'); 
}); 

You can test it out here. Comme vous obtenez plus d'éléments cependant, le gestionnaire de niveau ligne devient moins efficace et vous devriez regarder .delegate() au lieu, comme ceci:

$('table tr:even').addClass('even'); 
$('table tbody').delegate('tr', 'mouseenter', function() { 
    $(this).addClass("active"); 
}).delegate('tr', 'mouseleave', function() { 
    $(this).removeClass("active"); 
}).delegate('tr', 'click', function(){ 
    $(this).closest('tr').toggleClass('visited').siblings().removeClass('visited'); 
});​ 

You can test that version here, si vous n'allez pas dans cette voie, au moins déplacer le
$('table tr:even').addClass('even'); en dehors de la boucle, il suffit de courir une fois :)

Answer 2

Je devine ce que vous voulez faire est de supprimer la sélection précédente. Here's a working fiddle.

En fait, dans cet exemple, je suis enlever la classe visited de toutes les lignes de frères et soeurs:

$(this).siblings().removeClass('visited'); 

Aussi, est-il une raison pour l'utilisation:

$(this).closest("tr").toggleClass('visited'); 

Lorsque vous pouvez simplement utiliser:

$(this).toggleClass('visited'); // $(this) is a <tr> 

Answer 3

Que pensez-vous de cela?

$('table tr:even').addClass('even'); 

$('table tr').hover(function() { 
    $(this).toggleClass("active"); 
}); 

Cela couvrirait la mise en surbrillance et le vol stationnaire. Les autres suggestions fonctionneront pour l'effet visité.

Answer 4

Vous pouvez réduire votre jQuery et mettre en cache les performances.

Voici le violon ramifié: http://jsfiddle.net/HTerC/

Voici le jQuery

$rows = $('table tbody tr'); 
$rows.click(function(){ 
    $(this).addClass('visited'); 
    $(this).siblings().removeClass('visited'); 
}); 

$rows.hover(function(){ 
    $(this).toggleClass('active'); 
}); 

Vous voulez envelopper dans un $(document).ready() ainsi

Answer 5

Faites votre JS plus concise et je pense J'ai trié ce que vous devez faire

$('table tbody tr').hover(function(){ 
    $(this).toggleClass("active"); 
}).click(function(){ 
    $(this).addClass("visited").siblings().removeClass("visited"); 
}).filter(":even").addClass('even'); 

Ainsi vous avez une coloration en vol stationnaire, cliquez pour visiter, désélectionnez les autres, je ne sais pas si vous voulez cliquer sur désélectionner aussi, si vous changez juste addClass en toggleClass.