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。

我正在寻找的是一种方法来增加div的id或类，以便我可以使用类似下面的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，该脚本片段应该开始搜索以按钮的父div开头的下一个div。在这种情况下，它应该找到要切换的正确元素。

使用jQuery将div id增加1

1 个答案: