如何使用 Knockout js 在单击按钮时显示动态生成的文本区域

How can I show a dynamically generated textarea on button click using Knockout js?

本文关键字：动态 区域 文本 显示 Knockout 何使用 js 按钮 单击      更新时间：2023-09-26

我想根据按钮单击显示文本区域。非常简单，但文本区域和按钮是使用 Knockout js 动态生成的。我当前的代码有效，但它只扩展了第一个文本区域。显示多个项目。

HTML（按钮和文本区域是最后两个控件）：

 <!-- ko foreach: projects -->
    <div id="eachOppyProject" style="border-bottom: 1px solid #eee;">
        <table>
            <tbody>
                <tr>
                    <td><a data-bind="attr: { href: '/tools/oppy/' + guid }" style="font-size: 25px;"><span class="link" data-bind="    value: guid, text: name"></span></a></td>
                </tr>
                <tr data-bind="text: projectDescription"></tr>
                <tr data-bind="text: guid"></tr>
            </tbody>
        </table>
        <span class="forminputtitle">Have you done project this before?</span>  
        <input type="button" id="oppyBtn" class="btnOppy" data-bind="click: toggleTextArea" value="Yes" />
        <textarea id="oppyDoneTextArea" placeholder="Tell us a little of what you've done." data-bind="visible: show" /><br />
    </div>
<!-- /ko -->

JavaScript：

function displayTextArea() {
    var my_disply = document.getElementById('oppyDoneTextArea').style.display;
    if (my_disply == "block")
        document.getElementById('oppyDoneTextArea').style.display = "none";
    else
        document.getElementById('oppyDoneTextArea').style.display = "block";
}

挖空视图模型：

    function ProjectViewModel(proj) {
        //console.log(proj);
        var self = this;
        self.projects = ko.observableArray(proj);
var project = function(){
    var self = this;
    self.show = ko.observable(false);
    self.toggleTextArea= function(){
        self.show(!self.show());
        };
      }; 
    };

如您所见，控件是根据 Knockout 绑定的对象动态生成的。因此，使用 ID 是一个坏主意，因为它会生成重复的 ID。这是我现在的问题 - 此代码适用于第一个文本区域，但不适用于显示的其余项目。

我会尝试在项目模型上创建 2 个属性，"show"和"toggleTextArea"：

<!-- ko foreach: projects -->
<div id="eachOppyProject" style="border-bottom: 1px solid #eee;">
    <table>
        <tbody>
            <tr>
                <td><a data-bind="attr: { href: '/tools/oppy/' + guid }" style="font-size: 25px;"><span class="link" data-bind="    value: guid, text: name"></span></a></td>
            </tr>
            <tr data-bind="text: projectDescription"></tr>
            <tr data-bind="text: guid"></tr>
        </tbody>
    </table>
    <span class="forminputtitle">Have you done project this before?</span>  
    <input type="button" id="oppyBtn" class="btnOppy" value="Yes" data-bind="click: toggleTextArea" />
    <textarea id="oppyDoneTextArea" placeholder="Tell us a little of what you've done." style="height:75px;" data-bind="visible: show" /><br />
</div>
<!-- /ko -->

您的项目模型可能是这样的：

var project = function(){
    var self = this;
    self.show = ko.observable(false);
    self.toggleTextArea= function(){
        self.show(!self.show());
    };
};

这允许单击按钮来切换文本区域的状态。

我想你可以试试这个来得到结果。

HTML（按钮和文本区域是最后两个控件）：

<!-- ko foreach: projects -->
    <div id="eachOppyProject" style="border-bottom: 1px solid #eee;">
        <table>
            <tbody>
                <tr>
                    <td><a data-bind="attr: { href: '/tools/oppy/' + guid }" style="font-size: 25px;"><span class="link" data-bind="    value: guid, text: name"></span></a></td>
                </tr>
                <tr data-bind="text: projectDescription"></tr>
                <tr data-bind="text: guid"></tr>
            </tbody>
        </table>
        <span class="forminputtitle">Have you done project this before?</span>  
        <input type="button" id="oppyBtn" class="btnOppy" onclick="displayTextArea(this)" value="Yes" />
        <textarea id="oppyDoneTextArea" placeholder="Tell us a little of what you've done." style=" display:none; height:75px; " /><br />
    </div>
<!-- /ko -->

JavaScript：

function displayTextArea(element) {
    var my_disply = element.nextSibling
    if (my_disply == "block")
        document.getElementById('oppyDoneTextArea').style.display = "none";
    else
        document.getElementById('oppyDoneTextArea').style.display = "block";
}

希望它能对您有所帮助，并且只有在文本区域是下一个同级按钮时才能工作，您必须显示文本区域

相关文章：