输入字段中的背景问题

Posted 2023-04-18

【中文标题】输入字段中的背景问题

【英文标题】：Problems with backgrounds in input field

【发布时间】：2014-07-11 04:16:51

【问题描述】：

当我双击卡片时，会弹出对话框，然后可以创建复选框。到目前为止，一切都很好。然后我想如果我在对话框中创建一个复选框并通过按钮保存数据，创建的复选框的值会出现在卡片上。然后如果创建的所有复选框都被选中，则卡片上会出现绿色背景。表示任务已完成。如下图所示：

当我创建两张卡片时，其中一张表示任务已完成，如上图所示。在第二个中，您只需创建例如。两个复选框。那么问题是，绿色背景从第一张卡片上分散开来。如下图所示：

JQuery 中的代码：

function CheckBoxesChecked() 
        var numAll = $('input[type="checkbox"]').length;
        var numChecked = $('input[type="checkbox"]:checked').length;

        if (numChecked == numAll) 

            $('.checkBoxCard').css("background-image", "none").addClass('jo');
        
        else 
            $('.checkBoxCard').removeClass('jo').css('background-image', "url('/Pages/Images/creampaper.png')");
        
    

我尝试通过以下代码修复它：

function CheckBoxesChecked() 
        var numAll = $('input[type="checkbox"]').length;
        var numChecked = $('input[type="checkbox"]:checked').length;

        if (numChecked == numAll) 

            $currentTarget.$('.checkBoxCard').css("background-image", "none").addClass('jo');
        
        else 
            $currentTarget.$('.checkBoxCard').removeClass('jo').css('background-image', "url('/Pages/Images/creampaper.png')");
        
    

我使用 $currentTarget 表示每张卡都是唯一的。但它似乎不起作用。知道如何解决这个问题吗？

DEMO

【参考方案1】：

改变

$currentTarget.$('.checkBoxCard').css("background-image", "none").addClass('jo');

到

$currentTarget.find('.checkBoxCard').css("background-image", "none").addClass('jo');

查看更新后的fiddle。

【讨论】：

谢谢。这正是我正在寻找的。但我不明白为什么要使用find？有什么区别？

您使用find() 来查找作为另一个jQuery 对象后代的jQuery 对象。第一个 jQuery 对象 ($currentTarget) 没有方法 $()。

【参考方案2】：

使用 e.delegateTarget 代替目标。见https://api.jquery.com/event.delegateTarget/