jQuery操作问题答案

【问题标题】：jQuery manipulation questionjQuery操作问题
【发布时间】：2011-11-18 11:29:10
【问题描述】：

我有一个转发器，内容如下。

使用 jQuery，我想按如下方式操作模板：当我激活复选框时，具有“entryDiv”类的 div 的背景颜色应变为黄色。在相反的情况下，它应该变成蓝色。不知怎的，我没有完成它。

<asp:Repeater ID="rep" runat="server">
            <ItemTemplate>
                <div runat="server" class="entryDiv" id="entryDiv">
                <div runat="server" id="cbDiv" class="cbDiv">
                    <asp:CheckBox ID="isUsedCheckBox" CssClass="cbIsUsed" runat="server" />
                </div>
                </div>
            </ItemTemplate>
        </asp:Repeater>

我认为，下面的脚本是正确的，但是如何进行。

$(document).ready(function() {
    $('.cbIsUsed').change(function() {

    });

});

【问题讨论】：

您在转发器的 ItemTemplate 中有一个固定的 id - 请注意，如果您有多个项目，这将创建非法标记
@BrokenGlass：ASP.Net 运行时将为它正在呈现的每个项目生成唯一的 id，因此它将被自动处理。
@Cybernate - 谢谢，不知何故我错过了runat="server" 部分

标签： jquery asp.net html checkbox

【解决方案1】：

这样的事情应该可以解决问题。它将最近的祖先元素的背景颜色与class "entryDiv" 更改为黄色或蓝色，具体取决于复选框是否被选中：

$(".cbIsUsed").click(function() {
    if(this.checked) {
        $(this).closest(".entryDiv").css("background-color", "yellow"); 
    }
    else {
        $(this).closest(".entryDiv").css("background-color", "blue"); 
    }
});

查看工作示例here。

【讨论】：

您看过我在回答中发布的链接吗？它在那里工作正常......所以你的代码中可能有其他原因导致它。

【解决方案2】：

这个怎么样？

$(document).ready(function() {
    $('.cbIsUsed').change(function() {
        if($(this).is(':checked')){
           $(this).closest('.entryDiv.').css('background', '#ffff00');
        }
        else{
           $(this).closest('.entryDiv.').css('background', '#0000ff');            
        }
    });
});

【讨论】：

【解决方案3】：

$('.cbIsUsed').change(function() {
    $(this).parents(".entryDiv").css("background", this.checked ? "yellow" : "white");
});

应该做的伎俩。

【讨论】：

【解决方案4】：

试试这个：

$(document).ready(function() {     
    $('.cbIsUsed').change(function() {
        var $entryDiv = $(this).closest(".entryDiv");
        if(this.checked){
            $entryDiv.css({backgroundColor:"Yellow"});
        } else{
            $entryDiv.css({backgroundColor:"Blue"});
        }
    });  
});

工作示例：http://jsfiddle.net/kxBXw/1/

【讨论】：

我的代码可能有问题，但我从来没有得到黄色 div，只有蓝色 :(
@Jan：我不是其他代码的问题所在。我已经发布了一个实时示例@@jsfiddle.net/kxBXw/1，它工作正常。
不，抱歉，您的解决方案不正确。这一定是一个 jQuery 错误。请尝试重建我的代码并执行它，它不起作用。
checked 不一定是布尔值，尤其是在 Internet Explorer 中，这就是我在解决方案中使用 .is(":checked") 的原因。
使用复选框控件，jQuery 不起作用。我必须使用旧的输入控件才能使其运行。

【解决方案5】：

$(".cbIsUsed").change(function() {
  $(this).parents(".entryDiv").css("background", $(this).is(":checked") ? "yellow" : "");
});

http://jsfiddle.net/HTNpc/

【讨论】：

【解决方案6】：

$(document).ready(function() {
    $('.cbIsUsed').change(function() {
        var el = $(this).parents(".cbDiv");
        if($(this).prop("checked")) el.css("backgroundColor", "yellow");
        else el.css("backgroundColor", "blue");
    });
});

这会检查复选框是否被if($(this).prop("checked")) 选中，然后使用parents 方法获取类.cbDiv 的父div，并根据选中的值将其背景颜色更改为蓝色或黄色。

如果你想使用 CSS 类来做到这一点，你可以使用 addClass 和 removeClass：

el.addClass("yellow").removeClass("blue");

【讨论】：

这对你有用吗？我得到一个脚本错误（虽然它似乎以某种方式工作）
是的，我没有收到任何错误？错误到底是什么意思？
不支持对象或属性“prop”
嗯，prop 仅在 1.6 版本中添加到 jQuery - 您使用的是低于 1.6 的版本吗？

【解决方案7】：

必须有一个 jQuery 错误解决方案仅适用于输入复选框，而不适用于 .Net CheckBox-Control。使用 CheckBox，我将不得不使用 control-id，这在这种环境中似乎是不可能的（中继器，jQuery 没有得到 id）。

【讨论】：