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 回答