更改按钮删除线 javascript

Question

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

当您按下添加待办事项按钮时，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"]。

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

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

更改按钮删除线 javascript

Change button Striketrough javascript

javascript

css

strikethrough

node.js