divのクリックイベントを追加および削除する方法をJquery

jqueryを初めて使用していて、clickイベントを使用してdivにIDを追加したり削除したりする方法を知りたい場合は、htmlに追加してください。下のコードでは、divをクリックしてIDを追加することができましたが、削除方法はわかりません。どのdivが強調表示されていても、追加されたdivでなければなりません。 divを再度クリックしてハイライトを削除すると、htmlからIDを削除する必要があります。助けを前にありがとう。divのクリックイベントを追加および削除する方法をJquery

<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

ジョン、ありがとう！ –

私は準備イベントを処理するものから別のブロックに他の機能を維持したいです。

<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をクリックしても、HTMLからIDは削除されませんが、別のIDが追加されることはありません。あなたも同様に削除する方法を示すことができますか？ –

divのクリックイベントを追加および削除する方法をJquery

答えて

関連する問題