我遇到了以下问题，我想创建一个计数器函数来在模式之间切换，这样我就可以在多个页面上重复使用该函数，我在互联网上奋力拼搏，但找不到解决方案，我尝试了多个选项，但它只切换了前两个模式，而且当我检查日志时，我的计数器变量不会超过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">×</span>
</button>
</div>
<div class="modal-body">
BODY
</div>
</div>
</div>
</div>
<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>
给按钮赋予相同的类，如"按钮模态"。然后使用该类获取按钮，并为每个按钮添加一个click监听器，以隐藏上一个模态并显示下一个模态。