I have 10 div and when any one click on any div and then click on increment button then font size of that div should be increase.
It is working for single div. But I need for more than one div. When I remove getDate(), then it is working for one div.
I have to click on div and then click on increment or decrement tag.Then font size of that div should be increment or decrement.
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>
Advertisement
Answer
Version that increases only CLICKED div
It saves the original size on the div itself in a data attribute
I also bail out if nothing was clicked before plus or minus are clicked
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>