限制字体大小可以增加和减少的次数

Question

在我的 ruby​​ on rails 应用程序中，我在 application.js 中使用以下 javascript 来增加和减少文本大小：

function resizeText(multiplier) {
var elem = document.getElementById("sizeable");
var currentSize = elem.style.fontSize || 1;
elem.style.fontSize = ( parseFloat(currentSize) + (multiplier * 0.2)) + "em";
}

这是由视图中的这些代码段调用的：

<img id="plustext" alt="INCREASE TEXT SIZE" src="images/makeTextBigger.jpg" onclick="resizeText(1)" /> | 
<img id="minustext" alt="DECREASE TEXT SIZE" src="images/makeTextSmaller.jpg" onclick="resizeText(-1)" />

然后，代码会根据点击的内容使带有 id 的文本变大或变小：

<tr id='sizeable'>
    <td><%= certificate.age_rating %></td>
    <td>
        <%= link_to 'Edit', edit_certificate_path(certificate) %>
        <%= link_to 'Show', certificate_path(certificate) %>
        <%= link_to 'Destroy', certificate_path(certificate), method: :delete, data: { confirm: 'Are you sure?' } %>
    </td>
</tr>

但我想要做的是将字体大小可以增加和减少的次数限制为 2 次点击。

我已经尝试过了，并替换了我以前的 java 脚本，所以我的 application.js 现在看起来像这样：

$(function(){
 $('#film_release_date').datepicker({
    dateFormat: 'dd-mm-yy', altFormat: 'yy-mm-dd', 
    changeYear: true, maxDate: "5Y", minDate: "0D", changeMonth: true
  });
 });

var minSize = 1;
var maxSize = 5;

function resizeText(multiplier) {
    var elem = document.getElementById("sizeable");
    var newSize = parseFloat(elem.style.fontSize) + multiplier * 0.2;
    if (newSize < minSize) newSize = minSize;
    if (newSize > maxSize) newSize = maxSize;
    elem.style.fontSize = newSize + "em";
}

但这似乎不起作用。

如何调整我的代码来做到这一点？我对java脚本了解不多。

Answer 1

var minSize = 1;
var maxSize = 5;

function resizeText(multiplier) {
    var elem = document.getElementById("sizeable");
    var newSize = parseFloat(elem.style.fontSize) + multiplier * 0.2;
    if (newSize < minSize) newSize = minSize;
    if (newSize > maxSize) newSize = maxSize;
    elem.style.fontSize = newSize + "em";
}

Answer 2

<p id="plustext"   onclick="resizeText(this,1)" >Hello</p> 
<p id="minustext"  onclick="resizeText(this,-1)">World</p>

javascript：

function resizeText(elem,multiplier) {
elem.count=elem.count || 0;
if(elem.count<2){
var currentSize = elem.style.fontSize || 1;
elem.style.fontSize = ( parseFloat(currentSize) + (multiplier * 0.2)) + "em";
elem.count++;
}

}

edit1 : 如果你想一键增加和减少。

function resizeText(elem,multiplier) {
elem.count=elem.count || 0;
var currentSize = elem.style.fontSize || 1;
if(elem.count<1){
elem.style.fontSize = ( parseFloat(currentSize) + (multiplier * 0.2)) + "em";
elem.count++;
} else {
elem.style.fontSize = ( parseFloat(currentSize) - (multiplier * 0.2)) + "em";
elem.count--;
}

}

Answer 3

假设您实际上想要控制字体大小而不是点击次数。我希望这可以帮助您使其比您预期的更好。

 var initialFontSize = getFontSize();
 var maxFontSize;
 var minFontSize;

 function getFontSize() {
   var temp = document.getElementById("sizeable").style.fontSize;
   if (temp) {
     return temp.substr(0, temp.indexOf("em"))
   } else {
     return 1;
   }
 }


 function resizeText(multiplier) {
   maxFontSize = parseFloat(initialFontSize) + multiplier * 0.4;
   minFontSize = parseFloat(initialFontSize) - multiplier * 0.4;

   var elem = document.getElementById("sizeable");
   var currentSize = getFontSize();
   if ((event.srcElement.id == "plustext" && currentSize < maxFontSize) || (event.srcElement.id == "minustext" && currentSize > maxFontSize)) {

     elem.style.fontSize = (parseFloat(currentSize) + (multiplier * 0.2)) + "em";

   }
 }

<div id="sizeable">sdfsfsd</div>
<img id="plustext" alt="INCREASE TEXT SIZE" src="images/makeTextBigger.jpg " onclick="resizeText(1)" />|
<img id="minustext" alt="DECREASE TEXT SIZE" src="images/makeTextSmaller.jpg" onclick="resizeText(-1)" />

Answer 4

在调整@Andrei Nikolaenko 提供的答案后，将其添加到我的 application.js 中：

var minSize = 1;
var maxSize = 1.5;

function resizeText(multiplier) {
  var elem = document.getElementById("sizeable");
  var currentSize = elem.style.fontSize || 1;
  var newSize = parseFloat(currentSize) + multiplier * 0.2;
  if (newSize < minSize) newSize = minSize;
  if (newSize > maxSize) newSize = maxSize;
  elem.style.fontSize = newSize + "em";
}

主要区别在于我在var newSize = parseFloat(currentSize) + multiplier * 0.2; 行中使用了变量currentSize

感谢所有帮助过的人。