JQuery كيفية إلحاق وإزالة الحدث Click Click
سؤال
أنا جديد لاستخدام 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>