マウスが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

がある場合にだけ確認してください。すでに画像があります

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 2

は、あなたが（jQueryのを試してみました）（非表示）とjQuery（）ショー（）

Answer 3

他のオプションは、CSS :hover属性を使用することです。

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

クリックに関しては、divに画像を追加し、jQueryトグルを使用することができます。

HTML：

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

はJavaScript：

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

Answer 4

別のオプションは、削除アクション0を作ることである関数に

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(); 
} 

をクリックして次のコードを試してみてくださいn追加された画像（クリックされたとき）。

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);