了解 .toggle 功能和隐藏/取消隐藏按钮答案

【问题标题】：Understanding the .toggle function and hiding/unhiding buttons了解 .toggle 功能和隐藏/取消隐藏按钮
【发布时间】：2019-03-27 10:55:47
【问题描述】：

我有一个文本输入区域，它将字符串分割成一个数组，并为每个单词制作按钮。我希望能够在按钮上（'click'）隐藏每个单词。我尝试使用 Jquery.toggle 函数，但这只会隐藏我的所有按钮。我不能让他们重新出现。有没有办法让它们淡出并隐藏它们并能够取消隐藏它们。

我已经尝试搜索互联网。无法真正找到一个真正考虑编写我自己的切换的解决方案，但这似乎是错误的。是您可以使用切换来实际拥有一个可点击的静态按钮来隐藏或取消隐藏一段代码的唯一方法。

当没有显示/隐藏全部的按钮时，能够取消隐藏隐藏的东西显然有点奇怪。

    let createText=$('<textarea/>', {
        'id':'Text',
        'placeholder':'Text',
        'class':'form-control col col-md-5',
        'rows':'10'
    }).on("input", function() {
        let woorden = $(this).val().split(/(\s)/g);
        $('#outputButtons').empty();
        for (let i = 0; i < woorden.length; i++) {
            if (woorden[i].replace(/\s/g, "") != "") {
                let outputBtn=$('<button/>', {
                    'class': 'btn btn-secondary mt-2 mr-2'
                }).html(woorden[i])
                $('#outputButtons').append(outputBtn);                        
            }
        }
    });

    let outputButtons = $('<div/>', {
        'class':'col',
        'id':'outputButtons'
    }).on('click', function() {
        $('#outputButtons').toggle(1000); 

    });

我将如何继续，实际隐藏/取消隐藏彼此分开的按钮。如果没有显示/隐藏所有的静态按钮，这可能吗？

提前感谢您的阅读，我是一名新程序员，同时需要记住的信息和事情太多了，这有时会让人感到困惑。如果这篇文章令人困惑，非常抱歉。

【问题讨论】：

能否在您的问题中包含一个工作示例 sn-p（使用 HTML 代码）？也请咨询Minimal, Complete, and Verifiable example 以了解如何包含这样的示例，如果做错了，它往往会因不必要的难以阅读的代码而变得臃肿。
我的脚本中几乎没有 HTML 代码，我将所有带有 Javascript 的内容都附加到我的 HTML 中我包括一个屏幕截图：gyazo.com/b2700df133f55bb264a509e273258a06 正如你所看到的，每个单独的单词都是一个按钮，当我现在单击它们时使用我当前的代码，我隐藏了所有这些，我无法让它们重新出现。我希望将它们隐藏起来，彼此分开，实际上能够让它们重新出现，彼此分开。
拥有多少 HTML 代码并不重要，重要的是提供一个工作示例，以便人们可以自己重现问题。仅通过查看代码来调试代码通常非常乏味且耗时。请阅读Minimal, Complete, and Verifiable example

标签： javascript jquery button show-hide

【解决方案1】：

你可以在你的代码中试试这个：

编写下面的css类：

.hide{
opacity: 0;
}

然后应用于输出按钮（“点击”功能）：

$(this).toggleClass("hide")

【讨论】：

【解决方案2】：

您不需要使用切换按钮！

将此类添加到您要禁用的按钮

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

要更改状态，您可以使用 jquery

$("#id").toggleClass('disable');

【讨论】：