2 回答

TA貢獻1812條經驗 獲得超5個贊
僅增加 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>

TA貢獻1796條經驗 獲得超10個贊
嘗試這個,
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>
當調用函數 getDate() 時,我添加了一個變量“divId”來存儲選定的 div。然后我只對那個 div 應用字體大小。
添加回答
舉報