C＃.net-如何使用JavaScript在单击按钮时显示动态生成的文本区域？

Question

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

HTML（按钮和textarea是最后两个控件）：

 <!-- 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()" 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() {
    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";
}

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

Answer 1

这是因为您的按钮的type=submit并导致回发，请更改：

<input type="submit" id="oppyBtn" class="btnOppy" onclick="displayTextArea()" value="Yes" />

至

<input type="button" id="oppyBtn" class="btnOppy" onclick="displayTextArea()" value="Yes" />