Question

当我单击添加图像按钮时，会出现一个新图像当我点击新图像时，我可以使用jquery将其还原回我之前的状态...在悬停时添加图像显示上一个图像

在下面提供我的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();
  }
);

Answer 1

问题是你正在处理第一个div，然后删除它。有几种方法可以实现我认为的目标。

我建议使用hide / show进行操作以便于管理。

如果你想在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>

jquery回到以前的状态

1 个答案: