JQuery как добавить и удалить событие с событием div

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

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

источник

2009-07-10 Anonymous

Это немного чище использовать класс 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>

источник

2009-07-10 03:33:32

Джон, спасибо большое! – 2009-07-10 03:38:28

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

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

источник

2009-07-10 03:24:04 TheVillageIdiot

Спасибо за ваш ответ. В вашем примере нажатие на div для удаления выделения не удаляет ID из html, но предотвращает добавление другого идентификатора. Можете ли вы также показать, как удалить? – 2009-07-10 03:31:19

JQuery как добавить и удалить событие с событием div

ответ

Смежные вопросы