Jquery cách thêm và xóa trên sự kiện nhấp chuột div

Tôi mới sử dụng jquery và muốn biết cách thêm và cũng xóa ID khỏi div bằng cách sử dụng sự kiện nhấp và thêm vào html. Trong mã bên dưới, tôi đã có thể nối các ID từ việc nhấp vào một div, nhưng không chắc chắn cách xóa. Cho dù div được đánh dấu màu vàng nên là những người được nối thêm. Nhấp lại vào div để xóa đánh dấu cũng sẽ xóa ID khỏi html. Cảm ơn trước sự giúp đỡ nào.Jquery cách thêm và xóa trên sự kiện nhấp chuột 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>

Nguồn

2009-07-10 Anonymous

Đó là một chút sạch hơn để sử dụng một lớp CSS thay vì thay đổi kiểu dáng trực tiếp. Bằng cách đó, bạn có thể tận dụng chức năng toggleClass tiện dụng để bật và tắt làm nổi bật. Nó cũng dễ dàng để kiểm tra nếu một div được tô sáng: div.is(".highlighted") hoặc div.hasClass("highlighted") sẽ cho bạn biết.

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

Nguồn

2009-07-10 03:33:32

John, cảm ơn rất nhiều! –

Tôi muốn giữ các chức năng khác trong khối riêng biệt từ một lần xử lý sẵn sàng sự kiện.

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

Bây giờ, nhấp chuột hookup.

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

Nguồn

2009-07-10 03:24:04 TheVillageIdiot

Cảm ơn câu trả lời của bạn. Trong ví dụ của bạn, nhấp vào div để xóa đánh dấu không xóa ID khỏi html nhưng nó ngăn không cho một ID khác được thêm vào. Bạn có thể cho biết cách xóa không? –

Jquery cách thêm và xóa trên sự kiện nhấp chuột div

Trả lời

Các vấn đề liên quan