jQuery Jquery如何在div点击事件上附加和删除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1107498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery how to append and remove on a div click event
提问by
I am new to using jquery and would like to know how to append and also remove the IDs from divs using the click event and appending to html. In the code below I have been able to append the IDs from clicking on a div, but am not sure how to remove. Whichever divs are highlighted yellow should be the ones that are appended. Clicking again on the div to remove the highlight should also remove the ID from the html. Thanks in advance for any help.
我是使用 jquery 的新手，想知道如何使用 click 事件附加和删除 div 中的 ID 并附加到 html。在下面的代码中，我可以通过单击 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>
采纳答案by John Kugelman
It's a little cleaner to use a CSS class instead of changing the styling directly. That way you can take advantage of the handy toggleClassfunction to turn the highlighting on and off. It's also easy to test if a div is highlighted: div.is(".highlighted")or div.hasClass("highlighted")will tell ya.
使用 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>
回答by TheVillageIdiot
I like to Keep other functions in separate block from one handling readyevent.
我喜欢将其他功能与一个处理就绪事件保持在单独的块中。
<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>
Now hookup clicks.
现在连接点击。
<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>
