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

Question

这是一个如此简单的问题，但我这辈子无法让我的解决方案发挥作用，我已经摆弄了一段时间，而且有点短，我觉得自己像个白痴。

http://jsfiddle.net/N8pCq/292/

我会直接进入代码

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 时，您在其下看到的 .static_preview_image 会被完全删除，当用户上传图像时，带有 .static_preview_image 的 div 会返回，因此我们自然会想要删除该按钮并只显示关闭按钮。 .

回想起来，我可以看到开源 jQuery 是如何删除 .moon_remove_file_button 并复制它的，但是自从我写了这个之后，我想看看我在哪里犯了大脑放屁的错误......

又是小提琴...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