如何为模态切换创建一个jquery计数器函数答案

【问题标题】：how to create a jquery counter function for modal switching如何为模态切换创建一个jquery计数器函数
【发布时间】：2018-11-15 22:09:30
【问题描述】：

我遇到了以下问题，我想创建一个计数器功能来在模式之间切换，这样我就可以在多个页面上重复使用该功能，我正在通过互联网努力但找不到解决方案，我尝试了多个选项，但它只切换了前 2 个模式，当我检查日志时，我的计数器变量没有超过 1（第一次点击）。

我从这个开始

        var counter = 0; 
        var step = 1;
        var prev = 0;   

        $( document ).ready(function() {

            $('.button-'+counter).click(function() {
                    counter++;   
                    prev = counter - step;

                    $('.window-'+prev).modal('hide');
                    $('.window-'+counter).modal('show');
                    console.debug(counter, prev);

            });


            //$('.modal-header > .close').click(function() {
            //    counter = 0;
            //});

        });

然后经过一些研究，我最终得到了这个，但它做的完全一样

    var counter = 0; 
    var step = 1;
    var prev = 0;   

    $( document ).ready(function() {  
        $('#addproductnext').each(function() {
            $(this).on('click', function() {
                counter++;   
                prev = counter - step;
                console.log(counter, prev);
                if($('#addproductwindow').hasClass('window-'+prev)) {
                $('.window-'+prev).modal('hide');
                $('.window-'+counter).modal('show');

                };
        });
    });

这是我目前的快速解决方案，但我认为它不整洁

$( document ).ready(function() {  
    $('.button-0').click(function() {
        $('.window-0').modal('hide');
        $('.window-1').modal('show');
    });
     $('.button-1').click(function() {
        $('.window-1').modal('hide');
        $('.window-2').modal('show');
    });

     $('.button-2').click(function() {
        $('.window-2').modal('hide');
        $('.window-3').modal('show');  
    });

    $('.button-3').click(function() {
        $('.window-3').modal('hide');
        $('.window-4').modal('show');  
    });


//$('.modal-header > .close').click(function() {
//    counter = 0;
//});

});

这是我的 html 的样子（php 函数）

<div class="modal fade window-' . $number . '" id="' . $name . '" tabindex="-1" role="dialog" aria-labelledby="' . $name . '" aria-hidden="true" data-backdrop="' . $backdrop . '">
        <div class="modal-dialog ' . $class . '" role="document">
          <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deletemessage">' . $header .'</strong></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
BODY
    </div>
   </div>
  </div>
 </div>

【问题讨论】：

为所有按钮提供相同的类，例如button-modal 或其他东西。然后在第二段代码中将 #addprofuctnext 更改为 .button-modal 并删除 if 语句。试试看，让我知道进展如何
谢谢我的朋友！希望我早点发布这个，它会为我节省很多时间。
我已经发布了我的答案，以便将来的人们可以看到解决方案。

标签： javascript jquery modal-dialog click counter

【解决方案1】：

<button class="button-modal">Button 1</button>
<button class="button-modal">Button 2</button>
<button class="button-modal">Button 3</button>

<script>
var counter = 0; 
var step = 1;
var prev = 0;   

$(document).ready(function() {
    $('.button-modal').each(function() {
        counter++;
        prev = counter - step;
        $(this).on('click', function() {
            $('.window-'+prev).modal('hide');
            $('.window-'+counter).modal('show');
        };
    });
});
</script>

为按钮赋予与“按钮模式”相同的类。然后使用该类获取按钮，并为每个按钮添加一个单击侦听器以隐藏您的上一个模式并显示您的下一个模式。

【讨论】：