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

Question

我有一个文本输入区域，将字符串切割成一个数组，并为每个单词制作按钮。我希望能够在按钮上隐藏彼此独立的每个单词（“点击”）。我试图使用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); 

    });

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

提前感谢您的阅读，我是一名新的程序员，您需要同时记住这么多信息和事情，这会让它不时混淆。很抱歉，如果这篇文章令人困惑。

Answer 1

您可以在代码中尝试此操作：

写下面的css类：

.hide{
opacity: 0;
}

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

$(this).toggleClass("hide")

Answer 2

您无需使用按钮切换！

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

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

要更改状态，可以使用jquery

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