javascript - elim 单击了

Question

下面是一个 jsfiddle 链接，其中包含需要修改的代码。

http://jsfiddle.net/N44Ah/

这是上述 jsfiddle 链接中的 HTML 代码

<label for="cb">
    <div id="clickablediv">
        <input name="cb" id="cb" type="checkbox"/>
    </div>
</label>
<label for="cb">
    <div id="clickablediv">
        <input name="cb" id="cb" type="checkbox"/>
    </div>
</label>

这是上面 jsfiddle 链接中的 javascript

$('#clickablediv').click(function () {
    if ($(this).find('#cb').is(':checked')) {
        $(this).animate({
            opacity: 0.5
        }, 250);
    } else {
        $(this).animate({
            opacity: 1
        }, 250);
    }
});

这是基本的 CSS

#clickablediv {
    width: 100px;
    height: 100px;
    background: blue;
}

基本上我无法更改 div id、类或详细信息，因为它们是在数据库查询后从 php 创建的，什么拉出一个数组，然后用该 div 所需的信息填充每个 div，然后填充下一个 div，直到所有信息已经显示在不同的div中。

我知道这里需要修改的是 javascript，但我不确定如何修改，因为我不擅长 javascript。

我需要这样的效果，所以你点击的 div 是受到影响的 div，因为此时你点击的 div 只会影响顶部的 div。

我又一次无法更改 div 的 ID、类或详细信息。

这可能不相关，但是当我以相同的方式创建按钮和隐藏的 div 时，我确实遇到了同样的问题，除了单击按钮时需要显示与其关联的正确 div 但是在上面的问题中我需要做一个昏暗的效果，就像你在上面的 js 中看到的那样。

下面是关于使用 javascript 中的 (elim) 函数的按钮和隐藏 div 的代码的 jsfiddle 链接 我不确定是否需要采用相同类型的 elim 方法来解决我遇到的新问题。

http://jsfiddle.net/gpDFc/

我试图弄乱这两个 javascript，但由于我不擅长，所以我没有设法制作一个有效的脚本。

感谢您花时间阅读本文，期待您的帮助。

Answer 1

元素的ID必须是唯一的。

ID 选择器将返回具有所述 ID 的第一个元素，因此您的代码将仅将点击处理程序附加到 ID 为 clickablediv 的第一个 div 而不是第二个

由于您至少重复了两次 ID 不能更改，因此请使用属性选择器选择具有所述 ID 的 div。

$('div[id="clickablediv"]').click(function () {
    if ($(this).find('[name="cb"]').is(':checked')) {
        $(this).animate({
            opacity: 0.5
        }, 250);
    } else {
        $(this).animate({
            opacity: 1
        }, 250);
    }
});