使用 jQuery 将 div id 增加 1

Question

如果您能提供任何帮助，我将不胜感激。我搜索了高低，但未能找到解决我认为可能是常见问题的方法。我对 ASP.NET MVC 和 jQuery 非常陌生，所以我可能需要一些额外的帮助。就这样吧……

我有一个由 foreach (ASP MVC 4) 创建的包含许多行的表。每行都有我想在点击时显示/隐藏的附加信息（包含在 a 中）。

例如：

====================================================================
   | Ticket Number | Date Created | Description

-    123456          11/02/2012     How do I...?
      --- Additional Information ---
      Assigned To: Joe
      Notes: Blah, blah
      --- End Additional Information ---
+     123457          11/01/2012     When I click this I get....
=====================================================================

当用户单击加号时（我正在使用图像），我希望扩展附加信息，并且希望将加号图像更改为减号图像。

我已经弄清楚如何使用 jQuery 中的 IF 语句更改图像。但是，我不太清楚如何正确切换 div。我尝试过使用以下方法：

   $("button").click(function () {
       $(this).next("div.toggleMe").toggle(1000);
   });

如您所见，jQuery 扩展了它找到的下一个 div。这个问题是我不能把它和表数据放在同一行。由于某种原因，它只是看不到下一个 div。

我正在寻找一种将 id 或 div 的类增加一个的方法，以便我可以使用类似以下 jQuery 函数的东西：

    function slideonlyone(thechosenone) {
         $('.newboxes2').each(function(index) {
              if ($(this).attr("id") == thechosenone) {
               $(this).slideDown(200);
              }
              else {
                   $(this).slideUp(600);
              }
         });
    }

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:slideonlyone('newboxes1');" >slide this one only</a>
         </div>
         <div class="newboxes2" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:slideonlyone('newboxes2');" >slide this one only</a>
         </div>
         <div class="newboxes2" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:slideonlyone('newboxes3');" >slide this one only</a>
         </div>
         <div class="newboxes2" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
      </td>
   </tr>
</table>

正如您在 HTML 中看到的，每个 div 都有一个唯一的 id。如何在 foreach 循环中创建唯一 ID？而且，我如何让 jQuery 看到那个唯一的 id 以便我可以切换 div？

非常感谢您提供的任何信息！

Answer 1

如果您的 HTML 结构如下：

<div>
    <button>Click me</button>
</div>
<div class="toggle">
    This is initially hidden content
</div>

然后从按钮的角度调用$(this).next('div') 不会找到您的第二个 div — 它被其父 div 绑定。你真正想做的是找到下一个 div 从按钮的父元素开始。

$('button').click(function(){
    $(this).parent().next('div.toggle').toggle(1000);
});

使用上面的 HTML，脚本 sn-p 应该从按钮的父 div 开始搜索下一个 div。在这种情况下，它应该找到正确的元素来切换。