Jquery comment ajouter et supprimer un événement de clic div

Je suis nouveau à l'utilisation de jquery et je voudrais savoir comment ajouter et supprimer les ID de divs en utilisant l'événement click et en ajoutant au html. Dans le code ci-dessous, j'ai été en mesure d'ajouter les ID de cliquer sur un div, mais je ne suis pas sûr de savoir comment supprimer. Quels que soient les divs en surbrillance jaune, ils devraient être ceux qui sont ajoutés. En cliquant à nouveau sur la div pour supprimer la surbrillance devrait également supprimer l'ID du code HTML. Merci d'avance pour votre aide.Jquery comment ajouter et supprimer un événement de clic div

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('div.click').click(function() { 
    var bg = $(this).css('backgroundColor'); 
    $(this).css({backgroundColor: bg == 'yellow' || bg == 'rgb(255, 204, 204)' ? 'transparent' : 'yellow'}); 
    }); 
}); 
$(function(){ 
    $('#div1').bind('click', click); 
    $('#div2').bind('click', click); 
    $('#div3').bind('click', click); 
}); 
function click(event){ 
    $('#p1').append(event.target.id + ","); 
} 

</script> 
</head> 
<body> 
<div class="click" id="div1">click me</div> 
<div class="click" id="div2">click me</div> 
<div class="click" id="div3">click me</div> 
<p id="p1"></p> 
</div> 
</body> 
</html>

Source

2009-07-10 Anonymous

Il est un peu plus propre d'utiliser une classe CSS au lieu de changer le style directement. De cette façon, vous pouvez profiter de la fonction pratique toggleClass pour activer et désactiver la surbrillance. Il est également facile de tester si une div est en surbrillance: div.is(".highlighted") ou div.hasClass("highlighted") vous le dira.

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('div.click').click(function() { 
     $(this).toggleClass('highlighted'); 
    }); 
    }); 

    $(function() { 
    // Can use one CSS selector to find all three divs and bind them all at once. 
    $('#div1, #div2, #div3').bind('click', click); 
    }); 

    function click() { 
    var p1 = $("#p1"); 

    if ($(this).is(".highlighted")) { 
     p1.append(this.id + ","); 
    } 
    else { 
     p1.text(p1.text().replace(this.id + ",", "")); 
    } 
    } 

</script> 

<style type="text/css"> 
    .highlighted { 
    background: yellow; 
    } 
</style>

Source

2009-07-10 03:33:32

John, merci beaucoup! –

Je tiens à garder d'autres fonctions dans le bloc séparé d'une manipulation prêt d'événement.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 

<script type="text/javascript"> 
    var divs = new Object(); 

    function click(event){ 
     var did=event.target.id; 

     if($("#"+did).css('backgroundColor') == 'yellow') 
      divs[did]=true; 
     else 
      divs[did]=false; 

     AppendText(); 
    } 
    function AppendText(){ 
     var txt=""; 
     for(var x in divs) 
      if(divs[x]==true) 
       txt +=x+","; 

     $('#p1').html(txt); 
    }  
</script>

Maintenant, les clics de connexion.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('div.click').click(function() { 
     var bg = $(this).css('backgroundColor'); 
     $(this).css({backgroundColor: 
       bg == 'yellow' || bg == 'rgb(255, 204, 204)' ? 
       'transparent' : 'yellow'}); 
     }); 
     $('#div1').bind('click', divclick); 
     $('#div2').bind('click', divclick); 
     $('#div3').bind('click', divclick); 
    }); 
</script>

Source

2009-07-10 03:24:04 TheVillageIdiot

Merci pour votre réponse. Dans votre exemple, cliquer sur la div pour supprimer la surbrillance ne supprime pas l'ID du code HTML mais empêche l'ajout d'un autre ID. Pouvez-vous montrer comment enlever aussi? –

Jquery comment ajouter et supprimer un événement de clic div

Répondre

Questions connexes