0

我最近在 jQuery 中的遍历方面遇到了一些问题。我们有一个 Web 应用程序，并且有多个面板，每个面板都有一个标题和一个正文。在标题中，有一个用于展开/折叠面板主体的按钮。面板的设置与此类似：

<div id="panel-1" class="panel">
  <div class="panel-header>
      <span>Header Text</span>
      <div class="toggle-expansion"></div>
  </div>
  <div class="panel-body">...</div>
  <div class="panel-footer">...</div>
</div>

<div id="panel-2" class="panel"> ... </div> 
...

我们正在使用 Backbone.js 来设置所有视图，并且有一个名为的文件base-panel-view.js，所有其他面板都从该文件扩展。如果可能的话，我想把我的函数放在这里，这样我就不必为每个面板重写函数。这是该base-panel-view.js文件的一个片段：

...
       events: {
              ...
              "click .toggle-expansion" : "toggleExpansion"
       },
...
toggleExpansion: function() {
              var panel = $(this);                                   //Returns the entire panel
              var panelBody = panel.children(".panel-body");         //Should return the panel body
              var toggleButton = panel.find(".toggle-expansion");    //Should return the toggle button


              if(panelBody.hasClass("noDisplay")){
                     /* If the panel is collapsed, expand it */
                     panelBody.removeClass("noDisplay");
                     toggleButton.addClass("expanded").removeClass("collapsed");
              }else{
                     /* If the panel is expanded, collapse it */
                     panelBody.addClass("noDisplay");
                     toggleButton.addClass("collapsed").removeClass("expanded");                
              }             
       }
...

该panel变量被设置为整个面板，这是我所期望的，但是panelBody并toggleButton留空。在 Chrome 调试器中，我能够确认panel我按下的任何按钮都包含正确的面板，并且我可以看到其他变量是空数组。在调试器中，我可以查看panel包含它的子元素的数组，其中包括面板主体和标题（包含按钮）。

有什么明显的我做错或没有做的事情吗？我对 Javascript 和 jQuery 还比较陌生，所以我完全有可能搞砸了一些基本步骤。任何帮助将不胜感激。

此外，我可以确认 css 是正确的，因为我在其他地方制作了两个按钮来展开/折叠所有面板，并且我使用$(".panel-body"). 但是对于这个问题，我只关心按下的相应按钮的面板。

4

2 回答 2

0

编辑：我现在看到您正在使用 Backbone。看这个，你可以看到这this是 Backbone 视图，而不是 DOM 元素。要获取 jQuery 元素，您必须使用this.$该链接中的代码，而不是$(this).

EIDT2：对于任何未来的读者来说，这是问题所在，但不是确切的解决方案。OP能够（如评论中所述）替换它：

var panel = $(this);

有了这个：

var panel = this.$el;

一切都相应地工作。

于 2013-06-07T15:23:45.933 回答
0 
(this).$element

在 jQuery 函数中，this通常指的是您正在处理的实际 DOM 元素，而$(this)返回包装该元素的 jQuery 对象。

下面是一个示例代码

this.$('#clientsTable')
    .closest('.dataTables_wrapper')
    .find("div.toolbar")
    .html('<div class="table-tools-actions"><button class="btn btn-primary" id="addSelectedClients" onClick = addAllSelectedMembers()>' + "Add" + '</button></div>');

上面的代码采用我的表，在我的情况下是clientsTable并搜索类dataTables_wrapper，然后附加我的 HTML 代码块

于 2017-02-22T05:48:36.993 回答