Jquery come aggiungere e rimuovere su un evento div click

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

  •  12-09-2019
  •  | 
  •  

Domanda

Sono nuovo di utilizzare jQuery e vorrei sapere come aggiungere e rimuovere anche gli ID dalla div che utilizzano l'evento click e aggiungendo in html. Nel codice di seguito sono stato in grado di aggiungere gli ID da cliccando su un div, ma non sono sicuro come rimuovere. Qualunque div sono evidenziate giallo dovrebbe essere quelli che vengono aggiunti. Cliccando nuovamente sul div per rimuovere l'evidenziazione dovrebbe anche rimuovere l'ID dal html. Grazie in anticipo per qualsiasi aiuto. 

<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>
È stato utile?

Soluzione

E 'un po' più pulito di utilizzare una classe CSS invece di cambiare direttamente lo stile. In questo modo è possibile sfruttare la funzione di toggleClass a portata di mano per accendere l'evidenziazione e si spegne. E 'anche facile per verificare se un div è evidenziato:. div.is(".highlighted") o div.hasClass("highlighted") dirà ya 

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

Altri suggerimenti

mi piace tenere le altre funzioni in blocco separato da una manipolazione pronto evento. 

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

Ora clic sui collegamenti. 

<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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top