Question

只是一个基本的挣扎但是：

我希望用户能够切换chcp 65001 && dir // nope, still 437 chcp 65001 && cmd /c dir // correct UTF8标签。目前设置为“比较”，当他们点击它时，文字应更改为“添加”。如果他们再次点击它，它应该恢复正常。这就是我到目前为止所做的事情。

checkbox

HTML：

$(document).ready(() => {
    $(".visible").on("click", (event) => {
        // $(this).text($(this).text() == "added" ? "Compare" : "added");
        $("label").text("Item added");
    }).on("click", (event) => {
        $(event.currentTarget).addClass(".visible");
    })
});

文字在点击时会发生变化，但是：

无法更改，所以我在代码中遗漏了一些内容
它影响所有复选框，我不确定如何正确连接event.current目标。

任何帮助都会很好：）

Answer 1

也许你可以添加/删除一个类来识别它是否被切换，如下所示：

$(".visible").on("click", function() {
    var itemid = $(this).attr('id');
    if($("#"+itemid+" label").hasClass("added")){
        $("#"+itemid+" label").html("Compare");
        $("#"+itemid+" label").removeClass("added");
    } else {
        $("#"+itemid+" label").html("Added");
        $("#"+itemid+" label").addClass("added");
    }
});

Answer 2

对于＃1，您的注释掉的代码没有正确执行切换，因为使用ES5时{j}设置的this指针在使用ES6 () => {}函数构造时不起作用。使用$(event.currentTarget)代替$(this)可以满足您的需求。

发生＃2的原因是因为您的$('label')选择器将始终选择文档中的所有标签。使用$(event.currentTarget)代替也应修复它。

以下代码片段在我尝试时触发了事情：

（注意：自原始帖子以来我已对此进行了清理，以减少重复代码的可读性。）

$(document).ready(() => {
    $(".visible").on("click", (event) => {
        // (Store the jQuery-wrapped currentTarget HTML element in a variable for better readability here.)
        let $target = $(event.currentTarget);
        $target.text($target.text() === "added" ? "Compare" : "added");
    }).on("click", (event) => {
        $(event.currentTarget).addClass("visible"); // << also don't want the "." before visible here ... this string is already a class name, not a selector string
    })
});

您提出以下问题后再解释一下：

从您的示例中，您已经知道接收event参数的任何jQuery事件回调内部 - 就像上面的两个处理程序一样 - event.currentTarget指向事件所属的HTML元素到。

如果您正在使用函数回调的ECMAScript5（pre-ES6）形式，jQuery还会确保this指针设置为event.currentTarget以方便使用。

为方便起见，jQuery还将this指针绑定到指向event.currentTarget的任何内容，以便您可以执行此类操作，而无需每次都输入event.currentTarget：

$("button").on("click", function(event) {
    // Using ES5 function() {} form, this === event.currentTarget
    $(this).prop('value', 'hi!');
});

还有另一个例子in the jQuery docs on event.currentTarget here。

...但是从你的例子中 - 如果你使用ES6的特殊构造进行内联函数声明（(event) => {}），ES6会自己做一些便利并继续预先绑定this设置回调时this上下文的内容 - 示例代码中的this === window（您的全局window上下文）看起来像是()=>{}。并且jQuery无法将其重新绑定回HTML元素 - 即使它想要也不会。

所以本质上，如果您使用ES6 this表单，则不能再依赖event.currentTarget指向您的元素。

需要注意的另一个微妙之处是$()是原始的HTML元素，而不是jQuery包装的所有jQuery的事件绑定器方法等。要获得这些，你必须使用{包装元素{1}}使jQuery准备就绪。使用ES5 this形式时function() {}也是如此：为了获得jQuery功能，你必须先将它包装起来。

$("button").on("click", function(event) {
    // These will work -- and will be equivalent since we're getting called back using the ES5 "function() {}" construct.
    $(this).prop('value', 'hi!');
    $(event.currentTarget).prop('value', 'hi!');

    // But these will both throw an exception because they're referring to raw HTML elements, and not jQuery-wrapped HTML objects:
    this.prop('value', 'hi!');
    event.currentTarget.prop('value', 'hi!');
});

当然使用ES6 () => {}构造没有任何问题 - 您只需要注意this在使用它时与jQuery的工作方式不同。

另请注意，很多人喜欢使用$来代表jQuery包装元素的变量前缀如下：

let $button = $('#my-form button');

...从那以后，很明显$button是一个已经被包装为jQuery对象的HTML元素。

最后，将任何jQuery元素重新包装到另一个$()包装器中也是无害的 - jQuery只返回包装器本身：

let $button = $('#my-form button');
let $button2 = $($button);

// jQuery objects wrap the HTML element, but make it available in an array (since jQuery queries can return > 1) elements.
if ($button[0] === $button2[0]) {
    console.info('These are still the same element');
}

想要使用jquery切换复选框标签

2 个答案: