隐藏和显示按钮不起作用

hide and show buttons not working

本文关键字：不起作用 按钮 显示 隐藏      更新时间：2023-09-26

我有上传图像的代码：（它来自一个使用bootstrap 2的模板）

 <div class="span6">
   <div class="control-group">
     <label class="control-label">Imagen</label>
       <div class="controls">
         <div class="fileupload fileupload-new" data-provides="fileupload">
           <div class="fileupload-new thumbnail hide" id="upload" style="width: 200px; height: 150px;">
             <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="Beneficio"/>
           </div>
           <div class="hide fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;" id="preview"></div>
             <div id="imagen">
               <span class="btn btn-file">
                 <span class="fileupload-new hide" id="select_button">Seleccione</span>
                 <span class="fileupload-exists hide" id="change_button">Cambiar</span>
                 <input type="file" class="default" name="file"/>
               </span>
               <a href="#" class="btn fileupload-exists hide" data-dismiss="fileupload" id="removebutton">Remover</a>
             </div>
           </div>
         </div>
       </div>
     </div>

我在一些元素上使用"隐藏"，因为我需要隐藏这些按钮，以防客户端浏览器上的javascript不活动，因为它看起来很乱，按钮change_button和remove_button应该只在上传图像后出现。在这种情况下，select_button应该再次隐藏。

所以当涉及到js代码时，我做了以下操作：

$('#upload').show('hide');
$('#select_button').removeClass('hide');
$('#preview').show();
$('#select_button').click(function(){
  $('#select_button').addClass('hide');
  $('#change_button').show();
  $('#remove_button').show();
});

select_button可以隐藏，但在我使用show功能后，change_button和remove_button不会出现。

检查代码时，不会出现任何错误。那么我做错了什么？为什么这些按钮没有出现？

引导程序hide类包含display:none !important，它覆盖脚本添加的内联display值。

要显示元素，请使用removeClass()方法删除类hide，如下所示：

$('#upload').removeClass('hide');
$('#select_button').removeClass('hide');
$('#preview').removeClass('hide');
$('#select_button').click(function(){
  $('#select_button').addClass('hide');
  $('#change_button').removeClass('hide');
  $('#remove_button').removeClass('hide');
});

更新：

除此之外，您使用了错误的选择器，在HTML中您标识了removebutton，而在脚本中您使用了#remove_button。请确保您的所有选择都是正确的。

.show('hide')不是有效的参考

使用.hide()而不是引用

jquery不使用.show('hide')，请在此处阅读。而是使用.show()和.hide()
相关文章：