изменение размера шрифта по клику больше, чем по div

Question

У меня есть 10 делений, и когда кто-нибудь щелкает на любом делении, а затем нажимает кнопку увеличения, размер шрифта этого деления должен увеличиваться.

Это работает для одного деления. Но мне нужно больше, чем один 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>

Я добавил переменную divId для сохранения выбранного div при вызове функции getDate (). Затем я применяю изменение размера шрифта только к этому div.