javascript - 鼠标离开 div 时删除图像

Question

我有一个 3X3 的盒子，目前我有它，所以当你将鼠标悬停在任何一个正方形上时，背景会变成蓝色，然后当你将鼠标悬停在外面时，盒子会恢复为空。我也有它，这样当单击任何框时都会出现图像。我现在要完成的是使它在单击该框时会出现图像，而当再次单击该框时，该图像将消失，依此类推。

这是我所拥有的：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $('.divs').hover(function () {
                $(this).css("background-color", "#0000EE");
                console.log('hover');

            }, function () {
                $(this).css("background-color", "");
                console.log('hoverout');
            });

            $('.divs').click(function () {
                $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");
                console.log('divclicked');
            });
        });

Answer 1

你试过 jQuery().hide() 和 jQuery().show()

Answer 2

只需检查那里是否已经有图像

var $img = $("img", this);
if ($img.length > 0)
    $img.remove();
else
    $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");

如果您不想删除图像，只需切换可见性

var $img = $("img", this);
if ($img.length > 0) {
    $img.toggle();
} else {
    $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");

}

Answer 3

另一种选择是使用 CSS:hover属性。

.divs:hover {
    background-color: #0000ee;
}

关于点击，您可以将图像添加到您div的 s 并使用 jQuery 切换。

HTML：

<div class="divs"><img src="..." alt=""></div>

JavaScript：

$('.divs').click(function () {
    $(this).children("img").toggle();
});

Answer 4

在单击功能中尝试以下代码

if($('img.divimg').length == 0){
  $('img.divimg').fadeOut(function(){
    $(this).remove()
  });
}else{
  $(this).prepend("<img class='divimg' style='display:none;' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>").fadeIn();
}

另一种选择是对添加的图像进行删除操作（单击时）。

var img = $('<img>')
            .attr('src', 'http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png')
            .addClass('divimg')
            .css('display', 'none')
            .bind('click', function(){
                $(this).remove();
            });
$(this).prepend(img);