Jquery cómo añadir y quitar en un div evento click

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

  •  12-09-2019
  •  | 
  •  

Pregunta

Soy nuevo en el uso de jquery y me gustaría saber cómo añadir y quitar también el Id de divs el evento click y anexar a html.En el código de abajo he sido capaz de anexar los Identificadores de hacer clic en un div, pero no estoy seguro de cómo quitar.Lo que divs son resaltados en amarillo deben ser los que se anexan.Al hacer clic de nuevo en el div para quitar el resaltado también debe eliminar el ID del html.Gracias de antemano por cualquier ayuda.

<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>
¿Fue útil?

Solución

Es un poco más limpio a utilizar una clase CSS en lugar de cambiar el estilo directamente. De esa manera usted puede tomar ventaja de la función toggleClass mano para encender el relieve de encendido y apagado. También es fácil de comprobar si se pone de relieve un div:. div.is(".highlighted") o div.hasClass("highlighted") le dirán 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>

Otros consejos

Me gusta Mantener otras funciones en bloque separado de un manejo listo 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>

Ahora la conexión de clics.

<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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top