0

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

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

生病直接进入代码

查询：

    $('#_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 并复制它的，但是自从我写了这个 id 之后，我想看看我在哪里犯了大脑放屁的错误......

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

4

2 回答 2

1

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

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

演示

于 2013-07-09T20:09:54.537 回答
0

无需为此使用 javascript，只需使用 CSS 隐藏图像即可。这会稍微改变您的标记，但您也可以使用定位来实现您想要的外观（或使用从右到左的定位来反转顺序。可以在此处找到一个示例）。

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

于 2013-07-09T20:20:18.030 回答