更改按钮 Striketrough javascript

Question

我有这个网络应用程序，您可以在其中制作待办事项。我想要的是，当您选中复选框时，文本字段会被划过。

当您按下添加待办事项按钮时，会出现一个用 JavaScript 制作的新项目。现在，当您按下复选框（称为按钮）时，文本字段应该被抚摸。我怎样才能做到这一点？

提前致谢！

这是我的 html 中 todo 所在的部分。

<div class="items">

                <h3>Items</h3>

                <div id="itemList">
                </div>

                <button id="addItem" >Add Item</button>

            </div>

这是我的新项目构造函数

function item(content, list) {
    /* Global attributes */
    this.content = content;
    this.checked = false;
    this.id = 0;
    this.settings = new Settings();
    this.element = $("<div>");
    /* Local attributes */
    var button = $("<input type='checkbox' Class='inputCheck'>"); 
        button.appendTo(this.element);
    var text = $("<input type='text'>"); 
        text.appendTo(this.element); text.val(content);
    var edit = $('<button>Edit</button>'); 
        edit.appendTo(this.element);
    var deleteButton = $('<input type=\'image\' src=\'Images/trash.png\' height=\'20\' width=\'20\'>'); 
        deleteButton.appendTo(this.element);
    var thisObject = this;


    /* Appending item */
    list.addItem(this);
    text.attr("disabled", true);
}

（编辑）

当我按下添加待办事项按钮时，这个函数被调用：

$("#addItem").click(function(event){
    var newItem = new item("Default message", listSelected);
});

当这个方法被调用时，当前对象（称为thisObject）的复选框变为相反的。此处的文字也应该加上删除线

button.click(function() {
    thisObject.checked = button.is(":checked");
    //thisObject.text => strike
});

Answer 1

您提供的代码看起来并不完整，但要使文本被删除，您可以使用 CSS text-decoration: line-through;。

您可以通过这种方式input[type="checkbox"]:checked + input[type="text"] 启用使用复选框来删除相邻文本输入字段中的文本（使用您的 HTML 结构）。

您还可以将类应用到要打击的元素，并通过应用程序中的 Javascript 动态地操作元素的类（应用或删除它）。

由于您使用的是 jQuery，这里有一个示例，说明如何通过选中复选框（纯 CSS）或单击按钮（javascript/jQuery）来删除文本 - http://codepen.io/anon/pen/PWoaYZ