onclick 上的字体大小更改比 div 上的字体大小更改更多

Question

我有 10 个 div，当任何人单击任何 div，然后单击增量按钮时，该 div 的字体大小应该增加。

它适用于单个 div。但我需要不止一个 div。当我删除 getDate() 时，它适用于一个 div。

我必须单击 div，然后单击增量或减量标签。然后该 div 的字体大小应该增量或减量。

function getDate(e) {

  var originalSize = $('#' + e).css('font-size');

}

$(document).ready(function() {

  //var originalSize = $('div').css('font-size');           

  $('#linkIncrease').click(function() {

    modifyFontSize('increase');

  });

  $('#linkDecrease').click(function() {

    modifyFontSize('decrease');

  });

  $('#linkReset').click(function() {

    modifyFontSize('reset');

  })

  function modifyFontSize(flag) {

    var divElement = $('#divContent');

    var currentFontSize = parseInt(divElement.css('font-size'));

    if (flag == 'increase')

      currentFontSize += 1;

    else if (flag == 'decrease')

      currentFontSize -= 1;

    else

      currentFontSize = 16;

    divElement.css('font-size', currentFontSize);

  }

});

.divClass {

  font-size: 12px;

  padding: 10px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<a id="linkIncrease" href="#"><b>+</b></a>

<a id="linkDecrease" href="#"><b>-</b></a>

<a id="linkReset" href="#"> <b>X</b></a>

<br /> <br />

<div id="divContent" class="divClass" onClick="getDate(this.id);"> Hello </div>

<br>

<div id="divContent1" class="divClass" onClick="getDate(this.id);"> Hello </div>

Answer 1

只增加CLICKED div的版本它将 div 本身的原始大小保存在数据属性中如果在单击加号或减号之前没有单击任何内容，我也会退出let divElement;function modifyFontSize(flag) {&nbsp; let $divElement = $("#" + divElement);&nbsp; if ($divElement.length === 0) console.log("Nothing selected")&nbsp; let currentFontSize = parseInt($divElement.css('font-size'));&nbsp; if (flag == 'increase')&nbsp; &nbsp; currentFontSize += 1;&nbsp; else if (flag == 'decrease')&nbsp; &nbsp; currentFontSize -= 1;&nbsp; else&nbsp; &nbsp; currentFontSize = $divElement.data("orgSize") || 16;&nbsp; $divElement.css('font-size', currentFontSize);}$(document).ready(function() {&nbsp; $(".divClass").on("click", function() {&nbsp; &nbsp; divElement = this.id;&nbsp; &nbsp; if (!$(this).data("orgSize")) $(this).data("orgSize", $(this).css('font-size'))&nbsp; })&nbsp; $('#linkIncrease').click(function() {&nbsp; &nbsp; modifyFontSize('increase');&nbsp; });&nbsp; $('#linkDecrease').click(function() {&nbsp; &nbsp; modifyFontSize('decrease');&nbsp; });&nbsp; $('#linkReset').click(function() {&nbsp; &nbsp; modifyFontSize('reset');&nbsp; })});.divClass {&nbsp; font-size: 12px;&nbsp; padding: 10px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><a id="linkIncrease" href="#"><b>+</b></a><a id="linkDecrease" href="#"><b>-</b></a><a id="linkReset" href="#"> <b>X</b></a><br /> <br /><div id="divContent" class="divClass"> Hello </div><br><div id="divContent1" class="divClass"> Hello </div>

Answer 2

尝试这个，let divId = '';function getDate(e) {&nbsp; var originalSize = $('#' + e).css('font-size');&nbsp; divId = e;}$(document).ready(function() {&nbsp; //var originalSize = $('div').css('font-size');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; $('#linkIncrease').click(function() {&nbsp; &nbsp; modifyFontSize('increase');&nbsp; });&nbsp; $('#linkDecrease').click(function() {&nbsp; &nbsp; modifyFontSize('decrease');&nbsp; });&nbsp; $('#linkReset').click(function() {&nbsp; &nbsp; modifyFontSize('reset');&nbsp; })&nbsp; function modifyFontSize(flag) {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var divElement = $(`#${divId}`);&nbsp; &nbsp; var currentFontSize = parseInt(divElement.css('font-size'));&nbsp; &nbsp; if (flag == 'increase')&nbsp; &nbsp; &nbsp; currentFontSize += 1;&nbsp; &nbsp; else if (flag == 'decrease')&nbsp; &nbsp; &nbsp; currentFontSize -= 1;&nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; currentFontSize = 16;&nbsp; &nbsp; divElement.css('font-size', currentFontSize);&nbsp; }});.divClass {&nbsp; font-size: 12px;&nbsp; padding: 10px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><a id="linkIncrease" href="#"><b>+</b></a><a id="linkDecrease" href="#"><b>-</b></a><a id="linkReset" href="#"> <b>X</b></a><br /> <br /><div id="divContent" class="divClass" onClick="getDate(this.id);"> Hello </div><br><div id="divContent1" class="divClass" onClick="getDate(this.id);"> Hello </div>我添加了一个变量“divId”来在调用函数 getDate() 时存储所选的 div。然后我仅将字体大小应用于该 div。