Javascript 如何使用敲除js在按钮单击时显示动态生成的文本区域?
我想显示一个基于按钮点击的文本区域。非常简单,但是textarea和button是使用Knockout js动态生成的。除了只扩展第一个文本区域外,我当前的代码可以工作。显示了几个项目 HTML(按钮和文本区域是最后两个控件): 淘汰视图模型:Javascript 如何使用敲除js在按钮单击时显示动态生成的文本区域?,javascript,jquery,html,knockout.js,textarea,Javascript,Jquery,Html,Knockout.js,Textarea,我想显示一个基于按钮点击的文本区域。非常简单,但是textarea和button是使用Knockout js动态生成的。除了只扩展第一个文本区域外,我当前的代码可以工作。显示了几个项目 HTML(按钮和文本区域是最后两个控件): 淘汰视图模型: function ProjectViewModel(proj) { //console.log(proj); var self = this; self.projects = ko.observab
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());
};
};
};
如您所见,控件是基于敲除绑定的对象动态生成的。所以,使用ID是个坏主意,因为它会生成重复的ID。这就是目前我的问题所在——这段代码适用于第一个文本区域,但不适用于显示的其他项目。我认为您可以尝试使用这段代码来获得结果 HTML(按钮和文本区域是最后两个控件):
希望它能对您有所帮助,并且仅当textarea是按钮的下一个同级按钮时才起作用,单击该按钮您必须显示textarea我将尝试在项目模型上创建两个属性“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 -->
这允许单击按钮切换文本区域的状态。为什么不使用knockout提供的
visible
和click
绑定?在中,单击处理程序,只需通过可见的绑定来切换显示/隐藏文本区域的可观察对象…@nemesv我试过了,但它在文本区域的位置留下了一个空白。我有一个函数displayTextArea(),该函数将由按钮单击事件使用可见性调用,但是display:none似乎没有保留textarea应该位于的空间。你能创建js fiddle来显示你的问题吗?@MaxBrodin它在fiddle中不太有效,但你可以看到有几个项目。当我点击“是”按钮时,一个文本区域应该在相应的项目下向下滑动,并按下它下面的任何内容。目前,在我的工作应用程序中,button click事件只会向下推第一个项目的第一个textarea(可能是由于重复的ID),但是我不确定如何不具有重复的ID,因为textarea是动态生成的,或者如何不使用ID。将来,一旦我为这个文本区域设置了数据库模式,它就会被敲除。用户过去提交的内容将显示在文本区域。我已将视图模型添加到帖子中。我是个新手。我已经定义了self.projects,我会将您的代码添加到我当前定义的项目中吗?或者只是简单地添加它?我尝试将代码添加到我的视图模型中,但没有成功。您将一个名为proj的数组传递到ProjectViewModel中。我假设这是一组淘汰模型。它与属性为projectDescription的模型相同。这就是show和toggleTextArea函数应该使用的地方。“Proj”是以json格式从服务器返回给客户机的内容。我更新了代码以包含您建议的内容。它仍然不能很好地工作-项目没有正确地显示以及文本区域。你能给我看一下项目模型的模型定义吗,其中有projectDescription?
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());
};
};
};
<!-- 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 -->
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";
}
<!-- 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());
};
};