Jquery comment ajouter et supprimer un événement click div

StackOverflow https://stackoverflow.com/questions/1107498

  •  12-09-2019
  •  | 
  •  

Question

Je suis nouveau à l'aide jquery et voudrais savoir comment ajouter et supprimer également les ID de divs à l'aide de l'événement click et en ajoutant au format html. Dans le code ci-dessous j'ai été en mesure d'ajouter les ID de cliquer sur une div, mais je ne suis pas sûr de savoir comment supprimer. Quel que soit divs sont mis en surbrillance jaune devraient être ceux qui sont joints en annexe. En cliquant à nouveau sur la div pour enlever le clou doit également supprimer l'ID du html. Merci d'avance pour toute aide. 

<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>
Était-ce utile?

La solution

Il est un peu plus propre à utiliser une classe CSS au lieu de changer le style directement. De cette façon, vous pouvez profiter de la fonction toggleClass à portée de main pour mettre la surbrillance et hors tension. Il est également facile de tester si un div est mis en surbrillance. div.is(".highlighted") ou div.hasClass("highlighted") va te dire 

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

Autres conseils

Je tiens à garder d'autres fonctions dans le bloc séparé d'une manipulation prêt é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 clics Hookup. 

<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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top