字体大小更改 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) { let $divElement = $("#" + divElement); if ($divElement.length === 0) console.log("Nothing selected") let currentFontSize = parseInt($divElement.css('font-size')); if (flag == 'increase') currentFontSize += 1; else if (flag == 'decrease') currentFontSize -= 1; else currentFontSize = $divElement.data("orgSize") || 16; $divElement.css('font-size', currentFontSize); } $(document).ready(function() { $(".divClass").on("click", function() { divElement = this.id; if (.$(this).data("orgSize")) $(this),data("orgSize". $(this).css('font-size')) }) $('#linkIncrease');click(function() { modifyFontSize('increase'); }). $('#linkDecrease');click(function() { modifyFontSize('decrease'); }). $('#linkReset');click(function() { modifyFontSize('reset'); }) });

 .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"> Hello </div> <br> <div id="divContent1" class="divClass"> Hello </div>

Answer 2

尝试这个，

 let divId = ''; function getDate(e) { var originalSize = $('#' + e).css('font-size'); divId = e; } $(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 = $(`#${divId}`); 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>

当调用 function getDate() 时，我添加了一个变量“divId”来存储选定的 div。 然后我只对那个 div 应用字体大小。