javascript - 购物 list 应用程序 : using checkboxes to cross off items

Question

我正在通过 javascript/jquery 创建购物 list 应用程序，但在使用复选框来划掉列表上的项目时遇到问题。不过我已经很接近了。当选中某个框时，列表中的所有项目都会被划掉，并且应用程序顶部的主文本输入中的文本也具有删除线质量。选中其中一个框只会删除其旁边的相应文本。

这是我针对此特定功能的 JavaScript:

$('#shopping-list').on('change','input[type=checkbox]',function(){
    var input = $(this).parent().siblings('input[type=text]');
    $('input').css('textDecoration','line-through');

});

这里还有该应用程序当前版本的链接:

https://dl.dropboxusercontent.com/u/91499081/ShoppingList/shoppingList.html

Answer 1

简单的错误 - 我自己也犯过很多次。

jsFiddle demo

您正确识别了要加下划线的特定输入标记，并将该标记分配给变量。

但是在下一个 jQuery 行中，您将变量名称作为字符串，这告诉 jQuery 您想要获取该类型的所有元素。由于“input”是有效的元素类型，因此所有输入元素都会被修改。

因此，更改:

$('input').css('textDecoration','line-through');

致:

$(input).css('textDecoration','line-through');

我还建议选择不同的变量名称。如果您使用不同的变量名称，例如“myInput”，您可能已经找到了解决方案。

<小时/>

根据您的评论问题:

要选中/取消选中文本字段:

jsFiddle example

$('#shopping-list').on('change','input[type=checkbox]',function(){
    var input = $(this).parent().find('input[type=text]');
    if ($(this).is(':checked') ) {
        $(input).css('textDecoration','line-through');
    }else{
        $(input).css('textDecoration','none');
    }
});