0

在 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');
           });    
});

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

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

4

2 回答 2

0

使用 class="content" 而不是 id="content"

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

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

在以下位置查看更多信息： http: //api.jquery.com/id-selector/

于 2013-01-28T03:48:47.533 回答
0

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

您需要做的是为每个输入提供相同的类属性而不是 id，并且对于 div 类似。如果每组项目都在自己<li>的 a<ul>中，或者在它自己<tr>的 a中，这将是有意义的<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 更改为 classes 但可以这样做：

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

即，选择紧随单击项目之后的任何元素并切换它。我仅将其作为最后手段推荐的原因是它将您的 JS 与 html 的结构紧密联系在一起。使用$(this).closest("someParentElement").find("associatedElement")type 方法更加灵活，如果 html 结构需要更改，可能不需要更改。

于 2013-01-28T00:53:26.067 回答