Question

在foreach循环中我有我的内容......

                    <div foreach:"data">
             <input type="image" id="hideshow" src="/Images/aud_down-arrow.gif" />    
           <div id="content"> 
         <textarea data-bind="text:valueoftext" rows='5' cols='60'></textarea>

        </div></div>
     jQuery(document).ready(function ()     {    
    jQuery('#hideshow').live('click', function (event)     {    
        jQuery('#content').toggle('show');
           });    
});

目前它创建文本框但只有第一个文本框隐藏/显示...静止循环中的所有文本框都不起作用。

关于如何完成这项工作的任何建议都会很棒。

Answer 1

好吧，我最好填写你问题中的空白是你以这样的方式生成那个html，你为每个输入重复使用相同的id并为每个输入重复使用相同的id DIV。这导致无效的html，因为id在页面上必须是唯一的，并且尝试通过id JS / jQuery选择元素只会找到第一个。

您需要做的是为每个输入提供相同的 class 属性而不是id，并且类似于div。如果每组项目都在<li>内的<ul>内，或<tr>内的<table>内，那么这是有道理的，所以我建议您做类似的事情这样：

<ul>
   <li>
       <input type="image" class="hideshow" src="/Images/aud_down-arrow.gif" />    
       <div class="content"> 
          <textarea data-bind="text:valueoftext" rows='5' cols='60'></textarea>
       </div>
   </li>
   <li>
       <input type="image" class="hideshow" src="/Images/aud_down-arrow.gif" />    
       <div class="content"> 
          <textarea data-bind="text:valueoftext" rows='5' cols='60'></textarea>
       </div>
   </li>
   <!-- etc. -->
</ul>

然后，您可以使用jQuery的DOM导航方法来查找与每个图像关联的div：

jQuery(document).ready(function ()     {    
    jQuery('.hideshow').live('click', function (event) {    
        jQuery(this).closest("li").find("div.content").toggle('show');
    });
});

也就是说，单击图像时，向上导航到最近的包含<li>（或<tr>或您正在使用的任何内容）的树，然后从那里导航回到该容器中适当的内容。

请注意，.live() 方式已过期，应替换为.on() - 提供包含元素（<ul>或<table>或者你正在使用的任何一个id，说"mylist"，然后这样做：

jQuery('#mylist').on('click', '.hideshow', function() { ...

如果由于某种原因你没有容器中的每组元素并且你真的不想添加包含元素，那么你仍然需要将id更改为类，但是可以这样做：

    jQuery('.hideshow').live('click', function (event) {    
        jQuery(this).next().toggle('show');
    });

即，选择点击项目后立即出现的任何元素并进行切换。我之所以推荐这只作为最后的手段，是因为它将你的JS与html的结构紧密联系在一起。使用$(this).closest("someParentElement").find("associatedElement")类型方法更灵活，如果html结构需要更改，则可能无需更改。

Answer 2

使用class =“content”而不是id =“content”

jQuery('.content').toggle('show');

对于id选择器，jQuery使用JavaScript函数document.getElementById（），如果为多个元素分配了相同的ID，则使用该ID的查询将只选择DOM中的第一个匹配元素。

详情请见：http://api.jquery.com/id-selector/

jquery hide / show for knockout foreach loop

2 个答案: