Question

我正在尝试创建一个HTML表单，用户可以在其中单击添加按钮以创建另一个字段，并且每个字段都可以切换，只有最近添加的字段打开，其余字段关闭。我得到了添加部分，我正在使用类.hide（disply：none）来隐藏面板。以下是我的代码：

$("document").ready(function() {
            var template = $("#treatment-template").html(),
                $target = $("#all-treatments"), // in html, where dynamic templates should be inserted
                $btnAdd = $("#add-treatment"),
                max = 10,
                count = 1,
                inputRow = [],
                allCounts = [];



            $btnAdd.click(function(e){
              e.preventDefault();
              addRows();
              togglePanels();

            });


        function addRows(){
          if(count <= max){
            inputRow = {
              count : count
            }
            var html = Mustache.to_html(template, inputRow);
            $target.append(html);


            if(count > 1){
                for(var i =1; i<count;i++){
                    $("#invisible-part"+i).addClass("hide");
                }               
            }

            allCounts.push(count);

            count++;
          }else{
            $msg.text('too many fields!');
          }

        }


        function togglePanels(){
            console.log(allCounts);
            $.each(allCounts, function(index,value){
                $("#show"+value).on('click',function(){
                    console.log(this);

                    $("#invisible-part"+value).toggleClass("hide");
                });
            });
        }

        addRows();

这是我的胡子代码：

<div class="treatment-wrapper">

            <div class="row visible-part" id="visible-part{{count}}">
                <p class="treatmentid inline-block"> TREATMENT {{count}} 
                </p>

                <div id="show{{count}}" class="angledown inline-block">
                                <span class="fa-stack fa-2x">
                                    <i class="fa fa-circle fa-stack-2x icon-background2"></i>
                                    <i class="fa fa-angle-down fa-stack-1x"></i>
                                </span>
                </div>

            </div>

            <div class="invisible-part" id="invisible-part{{count}}">
                <div class="row">
                    <div class="col-lg-6">
                        <label for="start-treatment{{count}}">Start Date</label>
                        <input type="text" id="start-treatment{{count}}" name="start-treatment{{count}}" required value="yyyy-mm-dd">
                    </div>
                    <div class="col-lg-6">
                        <label for="end-treatment{{count}}">End Date</label>
                        <input type="text" id="end-treatment{{count}}" name="end-treatment{{count}}" required value="yyyy-mm-dd">
                    </div>

                </div>
          </div> <!-- end invisible part -->
  </div><!-- end treatment-wrapper -->

但是，由于某种原因，togglePanels（）函数不能正常工作。例如，当有两个字段/面板添加然后它们都工作，而如果有三个字段/面板，那么只有最后一个是可切换的，如果有四个字段/面板那么一个，两个和四个工作，但不是三。似乎并不是一致的模式，我对它很困惑。任何见解都将不胜感激。

Answer 1

删除每个循环和函数，执行以下操作：

 $('body').on('click','#add-treatment',function(e){
          e.preventDefault();
          addRows();
 });
 $('body').on('click','.angledown',function(){
       $(this).closest('.visible-part').next().toggleClass("hide");
 });

jQuery toggleClass适用于某些元素但不适用于其他元素（也使用Mustache）

1 个答案: