Question

我有一个小问题。我想在jquery中调整所有html元素的大小。我有代码，但我可以增加和减少到无穷大。

    var originalSize = $('html').css('font-size');
  // reset
   $(".resetMe").click(function(){
  $('html').css('font-size', originalSize); 

   });

   // Increase Font Size
   $(".increase").click(function(){
  var currentSize = $('html').css('font-size');
  var currentSize = parseFloat(currentSize)*1.05;
  $('html').css('font-size', currentSize);

  return false;
   });

   // Decrease Font Size
   $(".decrease").click(function(){
  var currentFontSize = $('html').css('font-size');
  var currentSize = $('html').css('font-size');
  var currentSize = parseFloat(currentSize)*0.8;
  $('html').css('font-size', currentSize);

  return false;
   });

我想限制增加和减少字体大小的数量？

如何编辑此代码？

Answer 1

我做了类似的事情并且没有工作

var originalSize = $('html').css('font-size');
var resizeCount = 0;
// reset
$(".resetMe").click(function(){
    $('html').css('font-size', originalSize);

});

// Increase Font Size
$(".increase").click(function(){
    var currentSize = $('html').css('font-size');
    var currentSize = parseFloat(currentSize)*1.05;
    $('html').css('font-size', currentSize);
    return false;
    var resizeCount =+1;
    if (resizeCount = 3) {
        event.preventDefault();
    }
});

// Decrease Font Size
$(".decrease").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentSize = $('html').css('font-size');
    var currentSize = parseFloat(currentSize)*0.95;
    $('html').css('font-size', currentSize);

    return false;
});

Answer 2

您的代码中存在一些错误，例如：你在click事件中覆盖resizeCounter值，因为你在它前面使用了var，或者你有错误的if语句。 =为变量分配新值，而不是==和===等等运算符。是的，您必须记住，如果您使用rem或em作为字体大小单位，更改根元素上的字体大小将仅适用于子元素。

请注意，如果您增加字体大小然后将其缩小，则通过下一次增加，计数器将具有其先前的值（它不会自动重置）。

＆＃13;

var originalSize = $('html').css('font-size');
var increaseCounter = 0;
var decreaseCounter = 0;

// reset
$(".resetMe").click(function() {
  $('html').css('font-size', originalSize);
  increaseCounter = 0;
  decreaseCounter = 0;
});

// Increase Font Size
$(".increase").click(function() {
  increaseCounter += 1;

  if (increaseCounter <= 3) {
    var currentSize = $('html').css('font-size');
    var biggerSize = parseFloat(currentSize) * 1.05;
    $('html').css('font-size', biggerSize);
  }
});

// Decrease Font Size
$(".decrease").click(function() {
  decreaseCounter += 1;

  if (decreaseCounter <= 3) {
    var currentSize = $('html').css('font-size');
    var decreasedSize = parseFloat(currentSize) * 0.95;
    $('html').css('font-size', decreasedSize);
  }
});

＆＃13;

html {
  font-size: 16px;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  font-size: 1rem;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  outline: 0;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

p {
  font-size: 1.3rem;
}

#banner-message {
  background: #fff;
  padding: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button class="resetMe">reset</button>
  <button class="increase">make bigger</button>
  <button class="decrease">make smaller</button>
</div>

＆＃13;

在jquery

2 个答案: