JQuery كيفية إلحاق وإزالة الحدث Click Click

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

  •  12-09-2019
  •  | 
  •  

سؤال

أنا جديد لاستخدام jQuery وترغب في معرفة كيفية إلحاق المعرفات وأيضا إزالة المعرفات من Divs باستخدام الحدث Click وإعادة تشغيل HTML. في الكود أدناه، تمكنت من إلحاق المعرفات من النقر فوق DIV، لكنني لست متأكدا من كيفية إزالته. أيهما يتم تسليط الضوء على العسفي يجب أن يكون الأصفر هو التي يتم إلحاقها. النقر مرة أخرى على DIV لإزالة التمييز، يجب أيضا إزالة المعرف من HTML. شكرا مقدما على أي مساعدة.

<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