如何使用 jQuery 上的点击功能更改 div 的 css，但是两次而不是一次？

Question

这是我使用的代码：

jQuery

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

});

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

Answer 1

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

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

以上使用逗号运算符和三元运算符来完成工作。

Answer 2

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

});

演示：http://jsbin.com/fobayo/1/edit?js,output

Answer 3

如果您只循环遍历 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;
    }
});

演示：http://jsfiddle.net/0zx6y7xt/

如何使用 jQuery 上的点击功能更改 div 的 css，但是两次而不是一次？

How to change the css of a div using the click function on jQuery, but however twice instead of once?

css

jquery

onclick