Jquery - копирование первого img src из div с 2 изображениями в другой div

#jquery

Вопрос:

Я уже некоторое время ищу решение этой проблемы, нашел несколько вариантов, но ни один из них на самом деле не работал в моем случае…

 html/php code:

<div class="something">
    <img src="images/gallery/<?php echo $row_get_img['imagename']; ?>">
    <img src="images/gallery/pixelfiller.png">
    //Divs are on top of one another(*code not transcribed fully*)
</div>

<div id="fullscreen">
    <div class="imgfull"></div>
</div>

Цель состоит в том, чтобы захватить 1-й img внутри класса «something» и заполнить «imgfull»
div с изображением.

скрипт jquery, который у меня есть на данный момент, таков:

 jquery code:

$("#content .something").click(
   function() {
       $("#fullscreen").show("slow");

$("#fullscreen").click(
   function() {
       $("fullscreen").hide("slow");
)

Я уже перепробовал множество опций, find(), attr(), get() и даже append().
Я полагаю, что тот, который, как я понял, был ближе к получению того, что мне было нужно, — это attr (), но я не могу понять почему.

Что мне действительно нужно, так это то, что при нажатии на div «something» исходный атрибут первого изображения внутри выбранного div должен быть отправлен в div «imgfull».

С помощью attr() мне удалось получить источник первого изображения в документе, а не div, я предполагаю, что мне нужно использовать $ (this) вместе с attr, но я просто не могу понять, также это решение должно вписываться в скрипт jquery, представленный первым.

Я не знаю, требует ли это слишком многого, но заранее спасибо за любой ответ на эту проблему.

Ответ №1:

Попробуйте

$(".something img:first").clone().appendTo(".imgfull");

Это приведет к получению элемента image, его клонированию и добавлению клона к .imgfull div.

Ответ №2:

Вы можете сделать что-то вроде этого (предполагая, что вы хотите только 1 изображение внутри divs с классом imgfull ):

 $('.something').click(function(){
     $('.imgfull').html('<img src="'   $(this).find('img:eq(0)').attr('src')   '" />');
});

Вот рабочий пример.

1. извините, но проблема не в этом, мне пришлось переписать код вручную с другого компьютера, все, что здесь размещено, работает, возможно, я просто переписал его неправильно. но спасибо за предупреждение, я отредактирую его

2. Да, пожалуйста, продолжайте и сделайте это — это сэкономит всем (включая вас) время и усилия, если мы будем работать именно с тем, что у вас есть.

Ответ №3:

Вы можете сделать что-то вроде этого (jsFiddle):

 <div id="source">
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" alt="img1" />
    <img src="http://maps.google.com/intl/en_us/images/logos/maps_logo.gif" alt="img2" />
</div>
<a href="#" id="move">Move</a>
<div id="dest"></div>

$('#move').click(function(){
    $('#dest').append('<img src="'   $('#source img:first').attr("src")   '" alt="img3" />');
});

Это связано с click событием, но точка действительна независимо от события, к которому она привязана.

Ответ №4:

Эта строка кода очистит #fullscreen .imgFull div, возьмет первый тег img из .something div и добавит его в #fullscreen .imgFull div.

 $('#fullscreen .imgfull').empty().append($('.something img:first-child').clone());

Редактировать: jsFiddle

Ответ №5:

Вы могли бы попробовать:

 $("#content .something img").click(
   function() {
       $('#fullscreen .imgfull').empty();
       $('<img src="'   this.src   '" />').appendTo('#fullscreen .imgfull');
   });

JS Fiddle.