javascript - 一旦 Javascript 中任何 HTML 元素的值发生变化，就更新 Canvas

Question

这是相关的javascript代码

<script>
    $.fn.ready(function() {
        var src = $('#src').val();
        Meme('url1', 'canvas','','');
        $('#top-line, #bottom-line').keyup(function() {
            Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            if(document.getElementById('stanley').checked) {
                src = 'url2';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            } else if(document.getElementById('futurama').checked) {
                src = 'url3';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            }
        });
    });
</script>

这是HTML代码

<div class="col-lg-12 col-md-12 col-sm-12">
    <input type="radio" name="meme" id="stanley" class="input-hidden" />
    <label for="stanley"><img src="url3" alt="" width="80px;" height="80px;"/></label>
    <input type="radio" name="meme" id="futurama" class="input-hidden" />
    <label for="futurama"><img src="url4" alt="" width="80px;" height="80px;" /></label>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="containcanvas" style="margin-top:10px;">
    <canvas id="canvas"></canvas>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" style="margin-top:10px;">
    <form>
        <input class="form-control" id="src" placeholder="Image URL">
        <input class="form-control" id="top-line" placeholder="top line">
        <input class="form-control" id="bottom-line" placeholder="bottom line">
    </form>

目前，如果顶行和底行中的文本发生变化， Canvas 就会更新。要在选中单选按钮后更新 Canvas ，我将其放在代码中，其中顶线和底线值的变化会更新 Canvas 。问题是这种方法很糟糕。另一个问题是我在 src 中输入图像 url 后 Canvas 没有得到更新。我应该如何修改此代码，以便在选中任何单选按钮或输入中的任何文本值发生更改时立即更新所有 Canvas ？

Answer 1

回调代码没什么神奇的。它只是一个作为参数传递给另一个函数的 Javascript 函数。因此，您可以有一个指向回调函数的变量，并在其他事件上调用它。

<script>
    $.fn.ready(function() {
        var src = $('#src').val();
        Meme('url1', 'canvas','','');

        var callbackFn = function() {
            Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            if(document.getElementById('stanley').checked) {
                src = 'url2';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            } else if(document.getElementById('futurama').checked) {
                src = 'url3';
                Meme(src, 'canvas', $('#top-line').val(), $('#bottom-line').val());
            }
        });

        $('#top-line, #bottom-line').keyup(callbackFn);
        $('input[name="meme"]').change(callbackFn);
        $('#src').change(callbackFn);
    });
</script>

我不确定 $('#src').change 是否是正确的事件:您可能需要 keyup，但意图应该很明确。