javascript - 隐藏和显示按钮不起作用

Question

我有这个用于上传图像的代码:(它来自使用 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没有出现。

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

Answer 1

Bootstrap hide类包含display:none !important它覆盖内联 display脚本添加的值。

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

$('#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 中使用了错误的选择器您的 ID removebutton ，并在脚本中使用 #remove_button 。确保您的所有选择都是正确的。