Question

我一直在为我的网站创建一个表单，它包含一些滑动功能。我有3个div和一些jQuery来添加和删除这些div。

当用户第一次点击按钮时，div会展开，并且＆＃34;删除＆＃34;按钮出现;原始按钮被另一个按钮取代，该按钮对具有不同id的另一个div执行相同的操作。这种情况发生了3次。
当用户点击＆＃34;删除＆＃34;时，div会被删除，而＃34;会添加另一个＆＃34;按钮被前一个＆＃34;替换为另一个＆＃34;按钮，等等。

这很有效，直到有人决定删除没有任何顺序的div;这导致了另一个＆＃34;添加另一个＆＃34;上一个div的按钮，当点击时，它什么都不会消失，因为div已经存在。

代码如下：

<div class="form-group">
  <h2 class="text-center">Vehicle Info</h2>
    <label for="inputEmail3" class="col-sm-2 control-label">Vehicle:</label>
    <div class="col-sm-10">
          <div class="col-sm-4">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Year">
          </div>
          <div class="col-sm-4">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Make">
          </div>
          <div class="col-sm-4">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Model">
          </div>
    </div>        
    </div>
    <div class="form-group">
    <h4 class="col-xs-offset-2">Comprehension/Other than Collision</h4>
    <label for="deductible" class="col-sm-2 control-label">Deductible:</label>
    <div class="col-sm-10">
            <select class="form-control">
                <option>Select</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
    </div>
    </div>
    <div class="form-group">
    <h4 class="col-xs-offset-2">Collision</h4>
    <label for="deductible" class="col-sm-2 control-label">Deductible:</label>
    <div class="col-sm-10">
            <select class="form-control">
                <option>Select</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
    </div>
    </div>
    <div id="load" style="display:none;">
    <p>&nbsp;</p>
        <div class="form-group">
            <h2 class="text-center">Vehicle Info</h2>
            <label for="inputEmail3" class="col-sm-2 control-label">Vehicle:</label>
            <div class="col-sm-10">
                  <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Year">
                  </div>
                  <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Make">
                  </div>
                  <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Model">
                  </div>
            </div>        
            </div>
            <div class="form-group">
            <h4 class="col-xs-offset-2">Comprehension/Other than Collision</h4>
            <label for="deductible" class="col-sm-2 control-label">Deductible:</label>
            <div class="col-sm-10">
                    <select class="form-control">
                        <option>Select</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
            </div>
            </div>
            <div class="form-group">
            <h4 class="col-xs-offset-2">Collision</h4>
            <label for="deductible" class="col-sm-2 control-label">Deductible:</label>
            <div class="col-sm-10">
                    <select class="form-control">
                        <option>Select</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
            </div>
            </div>
    </div>
    <label for="deductible" class="col-sm-2 control-label">Add another driver?</label>
    <div class="col-lg-6">
        <p id="show" class="btn call-form">Add another driver</p>
        <p id="show_2" style="display:none;" class="btn call-form">Add another driver</p> <small>&nbsp;Maximum 4 allowed</small>
        <p id="hide" style="display:none;" class="btn call-form">Remove</p>
    </div> 

  <div id="load_2" style="display:none;">
  <p>&nbsp;</p>
        <div class="form-group">
            <h2 class="text-center">Vehicle Info</h2>
            <label for="inputEmail3" class="col-sm-2 control-label">Vehicle:</label>
            <div class="col-sm-10">
                  <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Year">
                  </div>
                  <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Make">
                  </div>
                  <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Model">
                  </div>
            </div>        
            </div>
            <div class="form-group">
            <h4 class="col-xs-offset-2">Comprehension/Other than Collision</h4>
            <label for="deductible" class="col-sm-2 control-label">Deductible:</label>
            <div class="col-sm-10">
                    <select class="form-control">
                        <option>Select</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
            </div>
            </div>
            <div class="form-group">
            <h4 class="col-xs-offset-2">Collision</h4>
            <label for="deductible" class="col-sm-2 control-label">Deductible:</label>
            <div class="col-sm-10">
                    <select class="form-control">
                        <option>Select</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
            </div>
            </div>
    <label for="deductible" class="col-sm-2 control-label">Add another driver?</label>
    <div class="col-lg-6">
        <p id="show_3" style="display:none;" class="btn call-form">Add another driver</p><small>&nbsp;Maximum 4 allowed</small>
        <p id="hide_2" style="display:none;" class="btn call-form">Remove</p>
    </div> 
    </div>

    <div id="load_3" style="display:none;">
    <p>&nbsp;</p>
        <div class="form-group">
            <h2 class="text-center">Vehicle Info</h2>
            <label for="inputEmail3" class="col-sm-2 control-label">Vehicle:</label>
            <div class="col-sm-10">
                  <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Year">
                  </div>
                  <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Make">
                  </div>
                  <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Model">
                  </div>
            </div>        
            </div>
            <div class="form-group">
            <h4 class="col-xs-offset-2">Comprehension/Other than Collision</h4>
            <label for="deductible" class="col-sm-2 control-label">Deductible:</label>
            <div class="col-sm-10">
                    <select class="form-control">
                        <option>Select</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
            </div>
            </div>
            <div class="form-group">
            <h4 class="col-xs-offset-2">Collision</h4>
            <label for="deductible" class="col-sm-2 control-label">Deductible:</label>
            <div class="col-sm-10">
                    <select class="form-control">
                        <option>Select</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
            </div>
            </div>
    <label for="deductible" class="col-sm-2 control-label">Add another car?</label>
    <div class="col-lg-6">
        <p id="show_4" style="display:none;" class="btn call-form">Add another driver</p><small>&nbsp;Maximum 4 allowed</small>
        <p id="hide_3" style="display:none;" class="btn call-form">Remove</p>
    </div> 
    </div>

，jQuery如下：

$(document).click(function(){
        $("#hide").click(function(){
            $("div#load").fadeOut();
            $("p#hide").hide();
            $("p#show").slideDown();
            $("p#show_2").hide();
        });
        $("#show").click(function(){
            $("div#load").slideDown("slow");
            $("p#hide").slideDown();
            $("p#show").hide();
            $("p#show_2").slideDown();
        });
        $("#hide_2").click(function(){
            $("div#load_2").fadeOut();
            $("p#hide_2").hide();
            $("p#show_3").hide();
            $("p#show_2").slideDown();
        });
        $("#show_2").click(function(){
            $("div#load_2").slideDown("slow");
            $("p#hide_2").slideDown();
            $("p#show_2").hide();
            $("p#show_3").slideDown();
        });
        $("#hide_3").click(function(){
            $("div#load_3").fadeOut();
            $("p#show_2").hide();
            $("p#show_3").hide();
            $("p#show_3").slideDown();
        });
        $("#show_3").click(function(){
            $("div#load_3").slideDown("slow");
            $("p#hide_3").slideDown();
            $("p#show_3").hide();
        });
    });

我是jQuery的新手并尝试创建一个if循环，但失败了！

所以，我正在寻找的是＆＃34;添加另一个＆＃34;用于执行多个操作的按钮，即，使用不同的ID一次又一次地添加另一个类似的div 3次，因此我可以使用它通过PHP在我的电子邮件中准确地获取数据。

如果有任何不清楚的地方，请告诉我，我会更清楚。

请在此处查看输出 - http://jsfiddle.net/ms1pak0L/

Answer 1

您的代码存在许多问题，首先您没有将您的脚本包含在<script></script>标记中。然后在您的jquery脚本中，您尝试选择ID为"hide","show","hide_2"等的div，它根本不存在于您的脚本中。我假设您没有合适的了解DOM元素如何链接和使用。我建议浏览w3School和MDN上的文档。

提出你的问题，我们不清楚你要问的是什么？基于我所理解的，您正在尝试询问如何创建一个按钮，该按钮会在单击时生成具有特定ID的div，然后代码可以如下所示：

<button id="clickable",type=button> Click me </button>

然后在Jquery你可以这样做：

$('#clickable').on('click',function(){
            //function to add the div wherever you want to.

}）;

现在，从您的问题中不清楚您是否只需要3次点击，或者可以有更多次点击。如果用户可以单击3次以上，那么这个骨架脚本可以工作（前提是你知道如何操作DOM）。否则你需要创建一个隐藏的div元素来增加一个计数器，然后你可以获取该值的HTML值要记录点击次数的元素：

<div id="count">count</div>

并在jQuery中：

$('#count').innerHMTL=0;

$('#clickable).on('click',function(){
       var click=0;
      click=$('#count').innerHTML;
      $('#count').innerHTML+=1;
      if(click===3){
          //stop creating divs 
       }

});

除此之外，如果您要问其他问题，请尝试更好地重新解释您的问题，以便找到解决方案。

Answer 2

我已经改变了你的代码。看看它是否适合你

> var i = 1; $('#show').click(function(){   $('#load_'+i).slideDown();
>   $('#hide').show();  if (i == 3){        $(this).hide(); 
>     }
>     i++; }); $('#hide').click(function(){
>       i--;
>         if(i == 1){
>           $(this).hide();
>         }
>         $('#load_'+i).slideUp();
>         $('#show').show();
>         
>     });

修改过的小提琴： http://jsfiddle.net/ms1pak0L/1/

告诉我你是否需要帮助

jQuery - 从一个按钮

2 个答案: