javascript - jQuery - 通过一个按钮执行多个操作

我一直在为我的网站创建一个表单，它包含一些幻灯片功能。我有 3 个 div 和一些 jQuery 来根据需要添加和删除这些 div。

当用户第一次单击按钮时，div 会展开并出现“删除”按钮；原始按钮被另一个按钮替换，该按钮对具有不同 id 的另一个 div 执行相同的操作。这种情况发生了 3 次。
当用户点击“删除”时，div 将被删除，并且“添加另一个”按钮将被之前的“添加另一个”按钮所取代，依此类推。

这很有效，直到有人决定在没有任何命令的情况下删除一个 div；这会导致前一个 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 循环，但失败了!

所以，我正在寻找的是“添加另一个”按钮来执行多个操作，即，一遍又一遍地添加另一个类似的 div 最多 3 次，具有不同的 ID，这样我就可以使用它来获取通过 PHP 在我的电子邮件中准确地发送数据。

如果有什么不清楚的地方，请告诉我，我会说得更清楚。

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

最佳答案

我稍微改变了你的代码。看看它是否适合您

> 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();
>         
>     });

修改后的 fiddle : http://jsfiddle.net/ms1pak0L/1/

如果您需要任何帮助请告诉我

关于javascript - jQuery - 通过一个按钮执行多个操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32063391/

javascript - jQuery - 通过一个按钮执行多个操作

上一篇：javascript - 使用 angularjs 通过标签查找元素

下一篇：javascript - Ruby on Rails : Make Float Value to be limited to 5 decimal places