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>

我正在使用＆＃34;隐藏＆＃34;在某些元素上，因为我需要隐藏这些按钮，以防客户端浏览器上的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值。

要显示元素，请使用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的脚本。确保你的所有选择都是正确的。

Answer 2

.show('hide')无效reference

使用.hide()代替reference

Answer 3

jquery不使用.show('hide')读取它here。而是使用.show()和.hide()

隐藏和显示按钮不起作用

3 个答案: