使用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

不知道這是否是你問什麼？

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

Answer 2

一個簡單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 3

以下淡入切換當前點擊圖像。在這種情況下，您需要使用委託事件（請參閱documentation）以使其可以動態追加到圖像上。

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