如何使用jQuery上的click函数更改div的css，但是要更改两次而不是一次？

这是我正在使用的代码：

jQuery

$(document).ready(
function(){
    $("#button").click(function () {
        $('.text').css('max-width', '800px');
        $('.moretext').css('max-width', '800px');
    }); 

});

---

我目前正在使用上面的代码编辑文本的样式。当用户单击按钮时，两个div（text和moretext）的最大宽度更改为800px。这是完美的工作，但是，我如何使它，当用户点击按钮时，最大宽度更改为800px，然后当他再次点击时，它更改为900px，第三次点击时，1000px，第四次点击时，返回到800px

只需维护一个计数器，然后更新它

var px = 800;
$("#button").click(function () {
    $('.text, .moretext').css('max-width', 
    px+= 100, px == 1100 ? (px = 800, '800px') : px + 'px');
}); 

上面使用逗号运算符和三元运算符来完成这项工作

$(document).ready(function() {
  function getWidth(width) {
    if (!width || width >= 1000) {
      return 800;
    }

    return width + 100; 
  }

  $("#button").click(function () {
    var textMaxWidth     = parseInt($('.text').css('max-width'));
    var moreTextMaxWidth = parseInt($('.moretext').css('max-width'));

    $('.text').css('max-width', getWidth(textMaxWidth) + 'px');
    $('.moretext').css('max-width', getWidth(moreTextMaxWidth) + 'px');
  }); 

});

---

演示：

如果只循环4个选项，也许可以使用If语句并按如下方式计数：

var count = 0;

$("#button").click(function () {
    if ( count == 0 ) {
        $('.text').css('max-width', '800px');
        count += 1;
    } else if ( count == 1 ) {
        $('.text').css('max-width', '900px');
        count += 1;
    } else if ( count == 2 ) {
        $('.text').css('max-width', '1000px');
        count += 1;
    } else if ( count == 3 ) {
        $('.text').css('max-width', '700px');
        count = 0;
    }
});

---

演示：

正是我所需要的！Thanks@chipChocolate.py正如我在这段代码中看到的，这里有一个错误@Alexander，现在它不在那里了。一些分组问题现在解决了