JQuery wie anhängen und entfernen Sie auf einem div Click-Ereignis

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

  •  12-09-2019
  •  | 
  •  

Frage

Ich bin neu in Jquery verwenden und würde gerne wissen, wie anhängen und auch die IDs von divs mit dem Click-Ereignis entfernen und Anhängen in HTML. Im folgenden Code Ich habe die IDs anhängen konnten auf einem div von Klick, aber ich bin nicht sicher, wie zu entfernen. Unabhängig davon, welche divs sind gelb markiert, sollten diejenigen sein, die angehängt werden. Durch nochmaliges Klicken auf der div um die Markierung zu entfernen, sollte auch die ID aus der html entfernen. 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>
War es hilfreich?

Lösung

Es ist ein wenig sauberer eine CSS-Klasse zu verwenden, anstatt das Styling direkt zu ändern. Auf diese Weise kann die Vorteile der handlichen toggleClass Funktion übernehmen kann, um die Option Hervorhebung ein- und ausgeschaltet. Es ist auch einfach zu testen, ob ein div markiert ist. div.is(".highlighted") oder div.hasClass("highlighted") wird ya sagen 

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

Andere Tipps

Ich mag andere Funktionen halten in einem separaten Block von einem Umgang mit fertig Ereignisse. 

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

Jetzt 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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top