Question

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

这是上述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的id，class或细节。

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

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

http://jsfiddle.net/gpDFc/

我试图弄乱两个javascripts，但由于我不好，我没有设法制作一个有效的脚本。

感谢您抽出时间阅读本文，我期待着您的帮助。

Answer 1

元素的ID必须是唯一的。

ID选择器将返回具有所述id的第一个元素，因此您的代码将仅将click处理程序附加到标识为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);
    }
});

Answer 2

使用class而不是id如下所示。对于整个页面，您可以使用单个ID。如果您有多个具有相同名称的ID，则只会影响第一个ID。

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

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

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

Answer 3

DOM中所需的不同值

See here, modified fiddle: 

http://jsfiddle.net/N44Ah/1/

elim点击了<label> <div> <checkbox> </checkbox> </div> </label>

3 个答案: