Question

此功能会在我点击这样做时减少或同时增加memedotcomtop和memedotcomtop2的字体大小。我想分别减少和增加每个的大小。更具体地说，您可以在下面的图片中看到

我有两个文本框，每个

上有一个加号和一个减号按钮

当我想减少或增加第一个框（memedotcomtop）中文本的大小时，它会减少或增加第二个框中文本的大小（memedotcomtop2）

我的代码是：

layer.add(memedotcomtop2);
layer.draw();
var textmemeheight2 = stage.getHeight();
layer.draw();


layer.add(memedotcomtop);
layer.draw();
var textmemeheight = stage.getHeight();
layer.draw();

function lowertopsize()
{
    if(memefontsize > 10 )
    {


        memefontsize = memefontsize -1;
        memedotcomtop.fontSize(memefontsize);
        layer.draw()



    }
        if(memefontsize2 > 10){


        memefontsize2 = memefontsize2 -1;
        memedotcomtop2.fontSize(memefontsize2);
        layer.draw();           



    }


}   

function increasetopsize()
{
    memefontsize2 = memefontsize2 +1;
    memedotcomtop2.fontSize(memefontsize2);

    memefontsize = memefontsize +1;
    memedotcomtop.fontSize(memefontsize);
    layer.draw();
}




 document.getElementById('meme-top-smaller').addEventListener('click', function() {
    lowertopsize();
 }, false);
 document.getElementById('meme-top-bigger').addEventListener('click', function() {
    increasetopsize();
 }, false);




 document.getElementById('meme-top-smaller2').addEventListener('click', function() {
    lowertopsize();
 }, false);
 document.getElementById('meme-top-bigger2').addEventListener('click', function() {
    increasetopsize();
 }, false);

我正在使用这个库：kinetic-v5.0.1.min.js

Answer 1

试试这段代码。

layer.add(memedotcomtop2);
layer.draw();
var textmemeheight2 = stage.getHeight();
layer.draw();


layer.add(memedotcomtop);
layer.draw();
var textmemeheight = stage.getHeight();
layer.draw();

function lowertopsize() {
    if (memefontsize > 10) {
        memefontsize = memefontsize - 1;
        memedotcomtop.fontSize(memefontsize);
        layer.draw()
    }       
}

function lowertopsize2() {        
    if (memefontsize2 > 10) {
        memefontsize2 = memefontsize2 - 1;
        memedotcomtop2.fontSize(memefontsize2);
        layer.draw();
    }
}

function increasetopsize() {        
    memefontsize = memefontsize + 1;
    memedotcomtop.fontSize(memefontsize);
    layer.draw();
}
function increasetopsize2() {
    memefontsize2 = memefontsize2 + 1;
    memedotcomtop2.fontSize(memefontsize2);
    layer.draw();
}

document.getElementById('meme-top-smaller').addEventListener('click', function () {
    lowertopsize();
}, false);
document.getElementById('meme-top-bigger').addEventListener('click', function () {
    increasetopsize();
}, false);

document.getElementById('meme-top-smaller2').addEventListener('click', function () {
    lowertopsize2();
}, false);
document.getElementById('meme-top-bigger2').addEventListener('click', function () {
    increasetopsize2();
}, false);

注意：

为每个操作创建单独的函数，并且不在一个函数中包含memefontsize和memefontsize2。

Answer 2

这是一个有效的例子。你如何选择爬过DOM树取决于你。重要的是，您可以找到您需要关注的6个元素中的每一个 - 4个按钮和两个文本容器。

我还选择使用包含每一行的TR元素，作为跟踪当前缩放级别的简单方法，可以随着按钮的按下而增加或减少。

我的方法与你自己和JohnR所采用的方法之间的实质区别在于，我们只有一个增量函数和一个递减函数。该函数在使用此信息根据它们与原始触发按钮的相对位置来更改元素之前，定位在DOM中触发它的元素。

这提供了一些优点： 1）您没有重复的代码，在进行更改并更新所有副本时可能会出错。 2）您可以使用此页面上的元素数量不受限制 - 无需编写新的（基本相同的）事件处理程序。

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    // get the table
    var tbl = document.getElementById('tgtTbl');

    // get each of the row elements
    var rows = tbl.getElementsByTagName('tr');

    // and make them hold a variable that tracks their current zoom level.
    rows[0].zoomLevel = 1;
    rows[1].zoomLevel = 1;

    // get array of 4 buttons. -,+,   -,+
    var btns = document.getElementsByTagName('button');

    // and connect them to their handlers
    btns[0].addEventListener('click', onMinusBtnPressed, false);
    btns[1].addEventListener('click', onPlusBtnPressed, false);

    btns[2].addEventListener('click', onMinusBtnPressed, false);
    btns[3].addEventListener('click', onPlusBtnPressed, false);
}

function onPlusBtnPressed(evt)
{
    // determine which button triggered the event
    var btn = this;

    // determine the TD and TR elements that contain this button
    var containingCell = btn.parentNode;
    var containingRow = containingCell.parentNode;

    // grab the zoom level back from the TR element
    var curZoom = containingRow.zoomLevel;
    containingRow.zoomLevel += 0.1;

    // the text is simply contained within a TD - the first element in the row
    var targetCell = containingRow.childNodes[0];

    // update the font-size
    targetCell.setAttribute('style', 'font-size: ' + (curZoom*100) + '%');
}

function onMinusBtnPressed(evt)
{
    var btn = this;
    var containingCell = btn.parentNode;
    var containingRow = containingCell.parentNode;

    var curZoom = containingRow.zoomLevel;
    containingRow.zoomLevel -= 0.1;
    var targetCell = containingRow.childNodes[0];
    targetCell.setAttribute('style', 'font-size: ' + (curZoom*100) + '%');
}
</script>
<style>
</style>
</head>
<body>
    <div>
        <table id='tgtTbl'>
            <tr><td>Your top text</td><td><button>-</button><button>+</button></td></tr>
            <tr><td>Your bottom text</td><td><button>-</button><button>+</button></td></tr>
        </table>
    </div>
</body>
</html>

分别增加和减少字体大小

2 个答案: