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

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

＆＃13;

 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";

   }
 }

＆＃13;

<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)" />

＆＃13;

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";
}

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

感谢所有帮助过的人。

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

4 个答案: