使用javascript淡入和淡出圖像

Question

我有正確的代碼，因此當我單擊圖像鏈接時，jQuery將圖像放置在應有的位置並具有適當的大小。 但是，我無法弄清楚在javascript中使用什么代碼，因此當我再次單擊圖像時。 它將當前內容從div中刪除，然后重新放回原處，而不是將圖像重復放入div中？

這是JavaScript代碼：

<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('img').click (function() { 
        $('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
        return false;   
    $('img').fadeToggle([normal]); 
    });
});
</script> 

這是它正在起作用的HTML：

<div class="deal_content">

</div>
<div id="content">
    <div id="imagelink"> 
        <a href="#">
            <img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" />
        </a>
        <a href="#">
            <img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />
        </a>    
        <a href="#">
            <img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" />
        </a>
    </p>

</div>

Answer 1

一個簡單的if應該能夠檢測元素內部是否已經存在圖像：

<script type="text/javascript">
$(document).ready(function() {
    $('img').click (function() { 
        if ($('.deal_content img').length > 0) {
            $('.deal_content img').remove();
        } else {
            $('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
        }
        return false;   
        $('img').fadeToggle([normal]); 
    });
});
</script> 

Answer 2

以下淡入淡出切換當前單擊的圖像。 在這種情況下，您需要使用一個委托事件（請參閱文檔 ）使它在動態附加的圖像上起作用。

$(document).ready(function() {
    $('.deal_content').on("click", "img", function() { 
        $(this).fadeToggle("normal"); 
    });
});

然后為您的鏈接添加一個單獨的事件處理程序以附加圖像：

$('#imagelink a').click(function() { 
     $('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
    return false;
});

Answer 3

不確定這是您要的嗎？

$(document).ready(function() {
    $('img').click (function() { 
        var image = ('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />')
        $('.deal_content').html(image).hide().fadeToggle();   
    });
});