1

[画像の追加]ボタンをクリックすると、新しい画像が表示されます。新しい画像をクリックすると、jqueryを使用して以前の状態に戻すことができます...ホバーに画像を追加して前の画像を表示します

http://jsfiddle.net/6MmMe/37/

以下に私のjsコードを提供します

$("div").hover(
  function () {
    $("<div>add image</div>").click(function() {
        $(this).parent().unbind("hover").children("img").attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");
        $(this).remove();
    }).appendTo(this);
  }, 
  function () {
    $(this).find("div:last").remove();
  }
);
4

1 に答える 1

0

問題は、最初のdivを処理してから、それを削除していることです。私があなたの目標だと思うことを達成するためのいくつかの方法があります。

管理を容易にするために、非表示/表示で行うことをお勧めします。

jQueryでこれを実行したい場合は、次のように実行できます。

<!DOCTYPE html>
<html>
<head><script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style type='text/css'>
div div { color:red; display:none}
</style>
<script>
$(function(){
$('body > div').hover(function(){
    // show "add image"
    $('div', this).show(); 
}, function(){
    // hide "add image" and reet image src. 
   $('div', this).hide();
   $('img', this).attr("src", "http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg");
})
// top-level click handler
.click(function(){
        $('img', this).attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");              
    });
}); 

</script>
</head>

<body>
  <div>
    <img src="http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg" alt="Nov-12" title="Food Network Magazine" class="cover">
    <div href="#">add image</div>
</div>

</body>
</html>

これを主にCSSで実行したい場合は、クラスをjQueryと切り替えるだけで、次のように実行できます。

<!DOCTYPE html>
<html>
<head><script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style type='text/css'>
body > div {
background-image: url(http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg);
    width: 170px;
    height:222px;
    position:relative;
}
body > div.newImage:hover {
    background-image: url(http://www.onlinegrocerystore.co.uk/images/goodfood.jpg);
    width: 249px;
    height:274px;
}
div div { 
    color:red;
    position:absolute;
    bottom:0;
    margin-bottom:-16px;
    display:none;
}
div:hover div {
    display:block;
}
</style>
<script>
$(function(){
    $('body > div').click(function(){
       $(this).addClass('newImage');
    }).hover(false, function(){
        $(this).removeClass('newImage');
    });​
}); 
</script>
</head>
<body>
    <div>
        <div>add image</div>
    </div>
</body>
</html>

本当に物事を追加/削除したい場合は、次のように行うことができます。

<!DOCTYPE html>
<html>
<head><script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<style type='text/css'>
div div { color:red;}​
</style>
<script>
$(function(){
    $('body > div').hover(function(){
        // show "add image"
        $(this).append('<div>add image</div>');
    }, function(){
        // hide "add image" and reset image src. 
       $('div', this).remove();
       $('img', this).attr("src", "http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg");
    })
    // top-level click handler
    .click(function(){
        $('img', this).attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");              
    });
}); 
</script>
</head>
<body>
    <div>
        <img src="http://imgs.zinio.com/magimages/500299032/2012/416238969_170.jpg" alt="Nov-12" title="Food Network Magazine" class="cover">
    </div>
</body>
</html>
于 2012-11-15T02:07:34.037 に答える