Jquery-wie zum anfügen und entfernen auf ein div-click-Ereignis

Ich bin neu mit jquery und würde gerne wissen, wie das Anhängen und entfernen Sie auch das IDs aus divs verwenden des click-Ereignisses und Anhängen in html. Im code unten habe ich die Möglichkeit zum Anhängen der IDs durch klicken auf ein div, aber ich bin mir nicht sicher, wie Sie Sie zu entfernen. Welche divs sind gelb hervorgehoben werden sollten diejenigen, die angehängt sind. Durch einen Klick auf das div zu entfernen, das highlight sollte auch entfernen Sie die ID aus dem html. Vielen Dank im Voraus für jede Hilfe.

<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>
InformationsquelleAutor | 2009-07-10
  1. 7

    Es ist ein wenig cleaner zu verwenden eine CSS-Klasse anstelle der änderung des styling direkt. So können Sie die Vorteile der handlichen toggleClass - Funktion schalten Sie die Markierung auf und ab. Es ist auch einfach, um zu testen, ob ein div-Element hervorgehoben ist: div.is(".highlighted") oder div.hasClass("highlighted") will tell 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>
    • John, vielen Dank!
    InformationsquelleAutor John Kugelman
  2. 0

    Ich mag, um andere Funktionen in separaten block von einem Umgang bereit Veranstaltung.

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

    Nun hookup Klicks.

    <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>
    • Vielen Dank für Ihre Antwort. In deinem Beispiel Klick auf das div zu entfernen markieren Sie nicht entfernen Sie die ID aus dem html-aber er verhindert eine weitere ID wird angehängt. Können Sie zeigen, wie zu entfernen wie auch?
    InformationsquelleAutor TheVillageIdiot
Schreibe einen Kommentar