Jquery как добавлять и удалять событие щелчка в div

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

  •  12-09-2019
  •  | 
  •  

Вопрос

Я новичок в использовании jquery и хотел бы знать, как добавлять, а также удалять идентификаторы из divs с помощью события click и добавления в html.В приведенном ниже коде я смог добавить идентификаторы, щелкнув по div, но не уверен, как удалить.Какие бы разделы ни были выделены желтым цветом, это должны быть те, которые добавляются.Повторное нажатие на div для удаления выделения также должно привести к удалению идентификатора из html.Заранее спасибо за любую помощь.

<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>
Это было полезно?

Решение

Немного чище использовать CSS-класс вместо непосредственного изменения стиля.Таким образом, вы можете воспользоваться удобным toggleClass функция для включения и выключения подсветки.Также легко проверить, выделен ли div: div.is(".highlighted") или div.hasClass("highlighted") я тебе расскажу.

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

Другие советы

Мне нравится хранить другие функции в отдельном блоке от одной обработки готов событие.

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

Теперь подключение щелкает.

<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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top