jQuery 在 foreach 循环中切换 div答案

【问题标题】：JQuery toggle div inside the foreach loopjQuery 在 foreach 循环中切换 div
【发布时间】：2014-10-04 14:45:30
【问题描述】：

我正在使用 knockback.js。我有一个值“项目”列表（值来自服务器）。并将这些值的内容显示在<div class="hiddendivcontent"> 中。

<ul data-bind="foreach: projects" class="list-group">

     <li class="list-group-item" data-bind="click: function(data,event){CommunityView.showContents($data.pkey(),$data.folder(), data, event);}">
          <span style="border:0px;" class="glyphicon glyphicon-plus pull-right" data-toggle="dropdown" ></span>
          <ul class="dropdown-menu labellistdropdown" role="menu" style="min-width:200px;">
              <li>..</li>
          </ul>
          <div  class="hiddendivcontent">
              <ul data-bind= "foreach : $root.community()" class="list-group">
                   <ul data-bind = "foreach :items">
                     <li> <span data-bind="text:cname"></span></li>
                   </ul>   
              </ul>
           </div>    
    </li>  

 </ul>

当点击“CommunityView.showContents()”时，“hiddendivcontent”获取值。换句话说，“hiddendivcontent”应该在单击该方法时显示，否则它会保持隐藏状态。以下代码是我使用过的 Jquery 代码：

showContents : function(pk,rf,data,event){
            event.preventDefault();
            $('.hiddendivcontent').toggle(); 
    }

如果我使用上面的代码，则该值将填充到所有列表项中。我尝试了很多方法来切换 div，但没有任何效果。谁能给我一些建议？

提前致谢

【问题讨论】：

如果您创建一个简单的 jsfiddle 来解决您遇到的确切问题，这将非常有帮助。
另一件事 - 在您的 click 绑定中，您传递参数 $data.pkey(),$data.folder()，但应该是 data.pkey(),data.folder()，因为 $data 在匿名函数的上下文中是未定义的。
这没有问题。我已经用 js 部分的警报消息检查了它。我的问题是为每个列表项切换 hiddendivcontent
你说得对，我认为那行不通。但是 jsfiddle 还是不错的。
但是在 jsfiddle 中我不知道如何填充 foreach:projects 值的值。我是新手。所以我不知道如何在 jsfiddle 中进行

标签： jquery html twitter-bootstrap knockout.js knockback.js

【解决方案1】：

尝试使用淘汰赛visible 绑定。首先，当从服务器接收您的项目时，将isVisible observable 添加到每个项目中：

$.get(..., function(projects){
    projects = $.map(projects, function(project) {
        project.isVisible = ko.observable(false);
        return project;
    });
    viewModel.projects = projects; // assign received projects to your view model
});

现在在您的标记中使用visible 绑定，如下所示：

<div data-bind="visible: isVisible">
    <ul data-bind= "foreach : $root.community()" class="list-group">
        <ul data-bind = "foreach :items">
            <li> <span data-bind="text:cname"></span></li>
        </ul>   
    </ul>
</div>

请注意，您不再需要 hiddendivcontent 类。最后一件事，在您的showContents 中执行以下操作：

showContents: function(name, id, data, event) {
    data.isVisible(!data.isVisible());
}

见demo。我希望这就是你所需要的。

【讨论】：

感谢您的回答。但我尝试了另一种方式，它奏效了。这是我改进的答案。 jsfiddle.net/usezpkj2/4

【解决方案2】：

这是我的问题的答案。

我为列表添加了一些引导图标。因此，当用户点击引导字形图标时，应该会显示隐藏的 ul（每次用户点击它时都会动态创建）。

$(".glyphicon ").click( function ( e ){ 
   e.preventDefault() // prevent default action - hash doesn't appear in url
    var target = $(e.target);
    if(target.hasClass("glyphicon-chevron-right")){
    $(e.target).toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
    var $newList = $("<ul />");
        $newList.append("<ul class="+"hiddendivcontent"+">");
    for(var i = 1; i <=4; i++) {
        $newList.append("<li><span>" + "menu" + i + "</span></li>");
    }        
    $(this).closest("li").append($newList);
    }
    else if(target.hasClass("glyphicon-chevron-down")){
         $(e.target).toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
        $(e.target).parent().find("ul").remove();
    }
} )

http://jsfiddle.net/usezpkj2/4/

【讨论】：