divのクリックイベントに追加したり削除する方法のjQuery

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

  •  12-09-2019
  •  | 
  •  

質問

私はjqueryのを使用してに新しいですし、追加し、また、クリックイベントを使用してHTMLに追加するdivタグからIDを削除する方法を知っていただきたいと思います。以下のコードでは、私はdiv要素をクリックしてからIDを追加することができていますが、削除するかどうかはわからないしています。どちらのdivが追加されたものでなければなりません黄色で強調表示されます。ハイライトを削除するにはdivの上で再びクリックしても、HTMLからIDを削除する必要があります。任意の助けを事前に感謝します。

<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