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>

现在，如果顶线和底线中的文字发生变化，画布会更新。要在选中单选按钮后更新画布，我已将其放在代码中，其中顶部和底部行的值更改会更新画布。问题是这种方法很糟糕。另一个问题是我刚刚在src中输入图片网址后画布没有更新。我应该如何修改此代码，以便在选中任何单选按钮或输入中的任何文本值更改后，所有画布都会更新？

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，但意图应该明确。

只要在Javascript中任何HTML元素的值发生更改，就会更新画布

1 个答案: