[英]Apply JQuery to div's clicked
我正在制作一个数字列表,每个数字都在其单独的div上。 到目前为止,我能够使用Javascript(单击)删除div,但是我想启用JQuery,以便能够将一个类添加到div,然后使用按钮或类似的东西删除该类的所有div。 。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=203">
<title>Lista Mundial</title>
<style>
.divContainer {
width: 35px;
height: 25px;
border: solid 1px #c0c0c0;
background-color: #e1e1e1;
font-family: verdana;
float: left;
}
.text {
font-size: 15px;
font-family: verdana;
color: black;
margin-top: 4px;
}
h4 {
font-family: Verdana;
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<h4>Double click para borrar un numero</h4>
<script type="text/javascript">
for(var i = 1; i <= 639; i++){
var divTag = document.createElement("div");
divTag.id = i;
divTag.className = "divContainer";
document.body.appendChild(divTag);
divTag.ondblclick = function(){this.parentNode.removeChild(this)};
var pTg = document.createElement("p");
pTg.setAttribute("align", "center");
pTg.className = "text";
pTg.innerHTML = (i);
document.getElementById(i).appendChild(pTg);
}
</script>
</body>
</html>
http://jsfiddle.net/ramonfabrega/AZSy8/
为了简单起见,我只是尝试隐藏div的单击,但是JQuery似乎不起作用。 所以一定要关闭。
两个问题:
1)jQuery未加载。
2)您试图将click事件绑定到无效的selector
( divTag
而不是div
)
这是更新的小提琴: http : //jsfiddle.net/LFC3A/2/
关于#2-jQuery允许您通过多种方式选择元素。 最常见的是使用selector
。 jQuery支持的大多数选择器都来自CSS 1-3,尽管jQuery支持一些自己的自定义选择器(例如div:eq
, div:gt
等),请在此处查看选择器页面: http:/ /api.jquery.com/category/selectors/
现在,如果您的标记是:
<body>
<divTag>My Custom Div Tag</divTag>
<div>My regular DIV</div>
</body>
这样,您原来的小提琴就可以了。 实际上,这里有一个更新的小提琴,它演示了这一点: http : //jsfiddle.net/FpMAw/ (我更新了createElement以返回自定义元素divTag
)
访问jQuery的另一种方法是将DOM元素传递给它。 就像是:
var $body = $(document.body)
等同于var $body = $('body')
如果您引用它,那么现在您将拥有一个带有一堆有用的辅助方法的jQuery对象。 因此,在前面的示例中,我们现在可以执行以下操作:
$body.css('color', 'red')
希望这有助于进一步解释为什么它不起作用。 如果您还有其他问题,请随时提问:)
您没有在提琴中包含jQuery库
将$('divTag')
更改$('divTag')
$('div')
$(document).ready(function () {
$('div').click(function () {
$(this).hide();
});
});
这将同时创建和添加点击处理程序。
$('<div>').click(function(e){ this.addClass('active');})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.