Question

我正在制作一个数字列表，其中每个数字都在其各个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似乎不起作用。所以必须要做些什么。

Answer 1

两个问题：

1）没有加载jQuery 2）您试图将点击事件与无效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')

希望这有助于解释为什么它不起作用。如果您有任何其他问题，请随时询问：）

Answer 2

Fiddle Demo

你不是在小提琴中包含jQuery库

enter image description here

将$('divTag')更改为$('div')

阅读$( "element" )

$(document).ready(function () {
    $('div').click(function () {
        $(this).hide();
    });
});

Start Learning

jQuery API Documentation

Answer 3

这将同时创建和添加点击处理程序。

$('<div>').click(function(e){ this.addClass('active');})

将JQuery应用于div的点击

3 个答案: