Question

这是一个如此简单的问题，但是因为我的生活无法让我的解决方案起作用，我现在已经摆弄了一段时间并且稍微缩短了，我觉得自己像个白痴。

我直接进入代码

JQuery的：

    $('#_moon_static_bg_status').on('change',function(){ 

       var image_status =$('#test').hasClass('static_preview_image'),
           upload_button = $(".moon_upload_button");

            if (image_status){ 
               upload_button.hide(); 
            } else {
               upload_button.show();
            }

    }).trigger('change');

简单地说，我只想根据类.static_preview_image是否存在显示上传按钮，此类包含图像，当用户关闭图像时，整个div被删除，所以我认为调用该类会很好用于显示和隐藏，因为当它不在那里时我们显示上传，当显示图像时我们隐藏上传按钮。

HTML：

     <div class="moon_media_status" id="_moon_static_bg_status">

     <input type="button" value="Upload File" class="moon_upload_button button"></input>

     <a rel="_moon_static_bg" class="moon_remove_file_button" href="#">Remove Image</a>

     <div id="test" class="static_preview_image"></div>

     </div>

当单击.moon_remove_file_button时，你看到它下面的div .static_preview_image被完全删除，当用户上传图像时，带有.static_preview_image的div会回来，所以很自然我们想要删除该按钮并只显示关闭按钮。

回想一下，我可以看到开源jQuery如何删除.moon_remove_file_button并复制它，但是因为我写了这个id就像看到我在哪里制造大脑放屁的错误......

这里是小提琴...... http://jsfiddle.net/N8pCq/292/

Answer 1

单击“删除”按钮触发更改事件，以便逻辑重新应用。

$('.moon_remove_file_button').click(function(){
    $('#test').removeClass('static_preview_image');
    $('#_moon_static_bg_status').change();
});

<强> Demo

Answer 2

没有必要使用javascript，只需用CSS隐藏图像即可。这会稍微改变你的标记，但你也可以使用定位来实现你想要的外观（或者使用从右到左的定位来反转顺序。可以找到一个例子here）

HTML：

<div class="moon_media_status" id="_moon_static_bg_status">
    <a rel="_moon_static_bg" class="moon_remove_file_button" href="#">Remove Image</a> 
    <div id="test" class="static_preview_image"></div>
    <input type="button" value="Upload File" class="moon_upload_button button" />
</div>

使用Javascript：

$('.moon_remove_file_button').click(function(){
    $('#test').removeClass('static_preview_image');
});

$('.moon_upload_button').click(function () {
    $('#test').addClass('static_preview_image');
});

CSS：

.static_preview_image {
    height: 500px; 
    width: 500px; 
    background-image: url(http://themes.moonrocketstudio.com/brash/wp-content/uploads/2013/05/bur.jpg);}

.static_preview_image ~ .moon_upload_button{
    display: none;
}

修改

在这里演示：http://jsbin.com/ozades/1/edit

图像存在时隐藏上传按钮，图像消失时显示？

2 个答案: