繁体   English   中英

将JQuery应用于div的点击

[英]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事件绑定到无效的selectordivTag而不是div

这是更新的小提琴: http : //jsfiddle.net/LFC3A/2/

关于#2-jQuery允许您通过多种方式选择元素。 最常见的是使用selector jQuery支持的大多数选择器都来自CSS 1-3,尽管jQuery支持一些自己的自定义选择器(例如div:eqdiv: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')

阅读$(“ element”)

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

开始学习

jQuery API文档

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM