我可以单击同一个 gylphicon class 并在两个功能之间切换吗？

Question

是否可以单击一个字形图标并在两个功能之间切换？我在这里声明了一个字形铅笔

var tgtEditLink = document.createElement("a");
        tgtEditLink.href = "#";
        tgtEditLink.setAttribute('aria-label', 'Edit');
        var tgtEdit = document.createElement("i");
            tgtEdit.classList.add("glyphicon", "glyphicon-pencil", "white", "tgt-edit");
            tgtEdit.title = "Edit";
        tgtEditLink.appendChild(tgtEdit);
    tgtDragbar.appendChild(tgtEditLink);

用户可以单击此 class 以在我的应用程序上启用“编辑”功能。然后我希望能够单击同一个字形图标并为另一个字形禁用所述功能。

    $(document).on('click', '.tgt-edit', function rearrange() {
    $('#align-src-col').sortable(sortableOptionsSrc);

    return false;
});

以上代码将允许用户编辑他们的文本。

我希望能够再次单击铅笔“.tgt-edit”以禁用编辑并启用另一个功能。这在 javascript 中可行吗？

谢谢！

Answer 1

您可以切换元素的 class，使其不再具有 tgt-edit，而具有委托给其他操作的 class。

$(document).on('click', '.tgt-edit', function rearrange() {
    $('#align-src-col').sortable(sortableOptionsSrc);
    $(this).toggleClass(["tgt-edit", "tgt-other"]);
    return false;
});

我可以单击同一个 gylphicon class 并在两个功能之间切换吗？

Can I click the same gylphicon class and toggle between two functions?

javascript

jquery

function

click

toggle