Jquery, div click olayı ekleme ve kaldırma

Jquery'yi kullanıyorum ve tıklama olayını kullanarak ve html'ye ekleyerek divların nasıl ekleneceğini ve kaldırılacağını bilmek istiyorum. Aşağıdaki kodda, kimlikleri bir div’a tıklamaya ekledim, ancak nasıl kaldırılacağından emin değilim. Hangi altyazılar vurgulanırsa sarı eklenenler olmalıdır. Vurguyu kaldırmak için div üzerinde tekrar tıklamak da kimliği html'den kaldırmalıdır. Herhangi bir yardım için şimdiden teşekkür ederiz.Jquery, div click olayı ekleme ve kaldırma

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

kaynak

2009-07-10 Anonymous

Doğrudan stil değiştirmek yerine CSS sınıfı kullanmak biraz daha temiz. Bu şekilde, vurgulamayı açmak ve kapatmak için kullanışlı toggleClass işlevinden yararlanabilirsiniz. Bir div vurgulandığında test etmek de kolaydır: div.is(".highlighted") veya div.hasClass("highlighted") size söyleyecektir.

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

kaynak

2009-07-10 03:33:32

John, çok teşekkürler! –

Bir elleçleme hazır olay ayrı blokta diğer işlevleri tutun ister.

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

Şimdi birleştirme tıklamaları.

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

kaynak

2009-07-10 03:24:04 TheVillageIdiot

Cevabınız için teşekkür ederiz. Örneğinizde, vurguyu kaldırmak için div'a tıklamak, kimliği html'den kaldırmaz, ancak başka bir kimliğin eklenmesini engeller. Nasıl kaldırılacağını gösterebilir misin? –

Jquery, div click olayı ekleme ve kaldırma

cevap

İlgili konular