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();
    }
});

Answer 2

为display: none;提供#aitcg-control-panel，以便在初次加载时隐藏它。

#aitcg-control-panel {
  display: none;
}

然后你必须检查文件上传是否成功而没有任何错误，然后显示保存设计按钮。

jQuery('input[type="file"]').change(function() {
   if(jQuery(this).val()) {
      jQuery("#aitcg-control-panel").show();
   }
});

修改

要隐藏 SAVE DESIGN 按钮，请添加以下代码：

jQuery("svg text tspan").on("click", function() { if(jQuery(this).html() === "x") { jQuery("#aitcg-control-panel").hide(); } });

Answer 3

在css中添加此代码

#aitcg-control-panel{
    display:none;
}

使用jQuery的.ajaxComplete函数来检测ajax，如果是以下url则显示它。

检查以下代码

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "aitcg/ajax/addText/" || settings.url === "aitcg/ajax/addImage/" ) {
    jQuery("#aitcg-control-panel").show();
  }
});

使用jQuery代替$来选择元素。

上述代码在浏览器上测试时效果很好。

如果你对css有任何问题，

添加以下代替css。

jQuery(document).ready(function(){
    jQuery("#aitcg-control-panel").hide();
});

Answer 4

嗨，这可能不是正确的解决方案，但是一个与您的codes非常相似的示例，就像您在codes中需要successful上传text or image的确认回复一样1}}到你的服务器，

在这里，我创建了两个按钮one .save_design，需要hidden另一个.add_text或.add_image，现在当您点击.add_text弹出窗口时uploading of text or image的上传只是一个div #box1，这就是check所需要的，我已将textarea包含在check中如果已将任何value添加到textarea的on blur并使用条件我可以检查是否包含一些值，所以类似地，您需要检查上传它是否为空，如果不是然后.save-design fades-in。

$(document).ready(function(){
  $(".upload_text").on("click",function(){
  $("#box1").show();
});
$("#box1 > textarea").blur(function(){
	if($(this).val()){
 		$(".save_design").show();
  }
  else{
  		$(".save_design").hide();
     }  
	});
});

#box1{
  width:400px;
  height:200px;
  background:#ccc;
  position:absolute;
  display:none;
}
#box1 > textarea{
  border:0px; 
  background:transparent;
  width:99%;
  height:98%;
  resize:none;
}
.upload_text{
  width:150px;
  height:40px;
  background:orange;
  color:white;
  float:left;
  font-size:18px;
  text-align:center;
  padding-top:20px;
  margin-top:220px;
}
.save_design{
  width:150px;
  height:40px;
  background:orange;
  color:white;
  float:left;
  margin-left:10px;
  font-size:18px;
  text-align:center;
  padding-top:20px;
  margin-top:220px;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1"><textarea></textarea></div>
<div class="upload_text">Add text</div>
<div class="save_design">Save Design</div>

Answer 5

您似乎正在使用原型JS而普通$(selector)将无法像jQuery一样工作。

您最好使用vanilla JS queryselector

示例

var btn = document.querySelector('button[id^="submit-editorApply-"]') //hide button btn.style.display = "none"; //show button btn.style.display = "block";

注意：CSS选择器就是这样，因为按钮ID末尾出现的随机数不会从原型$()方法起作用，因为它只接受确切的元素ID < / em>的

Answer 6

如果您使用ajax上传并在svg上应用图像/文本，请简单地调用jQuery("#aitcg-control-panel").show();关于ajax的成功（如果你使用ajax，它可能是最简单的方法）。

Answer 7

尝试使用委托代替更改，如下所示：

$（'＃upload_field'）。on（'委托'，函数（）{

if（$（this）.val（）！==“”）{

    $('#submit-editorApply-').show();
}

}）;

归功于Danmoreng：）

隐藏按钮，直到我们上传图片或文字

7 个答案: