javascript - 隐藏按钮，直到我们上传图片或文本

Question

我们在 page 中有一个按钮“保存设计”我们还可以选择在页面中上传图片或文本。 在用户上传图片或添加文字之前，我们不想显示“保存设计”按钮

我们使用下面的代码来“保存设计”

_getControlPanelHtml: function()
    {
        if (this.config.editorEnabled) {
            return '<div id="aitcg-control-panel">' +
                '<button id="submit-editorApply-{{rand}}" >SAVE DESIGN</button>' +
                '<button >Reset</button>' +
                '</div>';
        }
        return '';
    },


    initObservers: function()
    {
        if (this.config.editorEnabled) {
            $('submit-editorApply-' + this.config.rand).observe('click', this.submitApply.bindAsEventListener(this));
            $('submit-editorReset-' + this.config.rand).observe('click', this.submitReset.bindAsEventListener(this));
        }
    },

    submitApply: function(event)
    {
        Event.stop(event);
        this.option.apply();
    },

我尝试用下面的代码隐藏“保存设计”，直到我们上传图片或文本。 我关注了这个link我添加了 style="display: none; 然后使用了 show() jQuery 方法。

<script>
    $('submit-editorApply-').show();
    _getControlPanelHtml: function()
    {
        if (this.config.editorEnabled) {
            return '<div id="aitcg-control-panel">' +
                '<button id="submit-editorApply-{{rand}}" style="display:none;" >SAVE DESIGN</button>' +
                '<button >Reset</button>' +
                '</div>';
        }
        return '';
    },

</script>

Answer 1

将事件监听器附加到这两个输入字段，然后检查该字段是否已填充。只有这样你才能使用 $('#submit-editorApply-').show();。

例子:

$('#upload_field').on('change', function(){
    if($(this).val() !== ""){
        $('#submit-editorApply-').show();
    }
});