У меня есть код, так что, когда я нажимаю ссылку на изображение, 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>
Не уверен, что это то, о чем вы просите?
$(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();
});
});
Простое, 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>
Следующий fade переключает текущее нажатое изображение. В этом случае вам нужно использовать делегированное событие (см. Документацию), чтобы он работал над изображениями, которые добавляются динамически.
$(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;
});
fadeTogggle
? Чтоnormal
? Вы, вероятно, просто хотите передать в строке"normal"
?