появление и исчезновение изображения с помощью JavaScript

Question

появление и исчезновение изображения с помощью JavaScript

0

У меня есть код, так что, когда я нажимаю ссылку на изображение, 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>

user3461092 25 март 2014, в 21:33

Источник

0

Вы передаете массив в fadeTogggle ? Что normal ? Вы, вероятно, просто хотите передать в строке "normal" ?
Juan Mendes 25 март 2014, в 20:16

Теги:

javascript

jquery

html

3 ответа

0

Простое, 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>

Skwal 25 март 2014, в 18:48

0

Следующий 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;
});

Wilmer 25 март 2014, в 18:26

Ещё вопросы

Вы передаете массив в fadeTogggle ? Что normal ? Вы, вероятно, просто хотите передать в строке "normal" ?

Clayton · Accepted Answer · 2014-03-25T18-14-00.000Z

Не уверен, что это то, о чем вы просите?

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