javascript - 通过 javascript 更改按钮删除线

Question

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

然后当您按下添加待办事项按钮时，会出现一个用 JavaScript 制作的新元素。现在，当您按下复选框(称为按钮)时，文本字段应该被描边。我怎样才能做到这一点？

提前致谢!

这是我的 html 中待办事项所在的部分。

<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)的checkbox被改变为相反的。这里的文字也应该有删除线

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

Answer 1

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

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

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

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