JQuery отображать IMG на разных div в зависимости от того, где он был нажат - PullRequest
Новая
       22

JQuery отображать IMG на разных div в зависимости от того, где он был нажат

0 голосов
/ 19 октября 2011

Чтобы лучше объяснить, что мне нужно, я загрузил пример здесь .

У меня есть 3 деления, и при нажатии на любой из них будет отображаться то же самое меню изображения справа.Теперь у меня есть: нажмите на первый div, затем перейдите в меню, выберите изображение и используйте .prepend(), чтобы показать это изображение на выбранном div.Но если я получаю меню изображения, появляющееся при щелчке по второму или третьему элементу div, и выбираю цвет, оно все равно отображается в первом элементе div.

Упрощенный HTML выглядит примерно так:1010 * И JS: 

$('.carousel_image1 img').click(function () {
    var imageName = $(this).attr('alt');
    var chopped = imageName.split('.');
    $('#title_tela1').empty();
    $('#title_tela1')
        .prepend(chopped[0]);
    $img = $(this);
    $('#tela1 img').attr('src', $img.attr('src'));
})

Я пытался использовать селектор ('#tela1_options .carousel_image1 img') для каждого из трех делений, но все же, когда я выбираю, изображение отображается только на первом делении.

Может кто-нибудь взглянуть и помочь мне разобраться?

1 Ответ

0 голосов
/ 19 октября 2011

Внутри вас есть функция щелчка для карусели, у вас жестко задан код "# tela1".Эта часть должна быть динамической, в зависимости от того, на что нажали div.Вы, вероятно, захотите сохранить нажатый div в переменной, которая будет использоваться внутри функции click.Вот пример того, как может выглядеть ваша функция document.ready: 

$(function(){
    var clickedDiv = null;

    $(".tela").click(function(){
        clickedDiv = $(this);
    });

    $('.carousel_image1 img').click(function () {
        var $img = $(this),
            imageName = $img.attr('alt'),
            chopped = imageName.split('.');

        clickedDiv.next().text(chopped[0]);
        clickedDiv.find('img').attr('src', $img.attr('src'));
    });
});

Чтобы это работало, вам нужно добавить class = "tela" в div. 

<div id="tela1" class="tela"><img src="img/blank.jpg" /></div>
<div id="title_tela1"></div>
<div id="tela2" class="tela"><img src="img/blank.jpg" /></div>
<div id="title_tela2"></div>

Вот рабочий пример jsFiddle: http://jsfiddle.net/jY4qa/2/ Я настроил изображения только в первой карусели для отображения.Но если вы щелкнете по одному из пустых элементов div, а затем по изображению, оно установит его правильно.Мне также пришлось обновить селектор карусели изображений в JS для моего примера.

...