Как использовать атрибут данных, чтобы назначить их контейнеру div?

Я пытаюсь разобраться с HTML5 и JS. Пока не совсем успешно.

Я хочу динамически загружать некоторые атрибуты данных из элементов «li» в контейнер div. Контейнер div предоставит дополнительную информацию слайду flexslider.

HTML:

<div id="carousel" class="flexslider">
    <ul class="slides">
        <li data-text="Text 1">
            <img src="http://placehold.it/90x75/00CC00/ffffff" />
        </li>
        <li data-text="Text 2">
            <img src="http://placehold.it/90x75/CD0074/ffffff" />
        </li>
        <li>
            <img src="http://placehold.it/90x75/FF7400/ffffff" />
        </li>
        <li>
            <img src="http://placehold.it/90x75/FF0000/ffffff" />
        </li>
    </ul>
</div>

Элемент "data-text" должен быть напечатан в следующем пустом ‹"span"> элемента div по клику. Содержимое каждого атрибута данных списка уникально. Слайды — это миниатюры, которые действуют как навигация:

<div class="info-text"> <span></span>
    <a class="votebutton" href="#">Abstimmen</a>
</div>

JS

$('#carousel ul.slides > li').click(function () {
    $('#carousel ul.slides > li').data('text').add('#info-text > span');
    console.log($('#carousel ul.slides > li').data('text'));
});

Я знаю, что лень спрашивать о решении, но я пытаюсь найти решение уже три часа. Пробовал с .add(), .appendTo() и attr.()

Есть ли решение?


containers html jquery custom-data-attribute
person JSNooB    schedule 16.07.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Если я правильно понимаю, это может быть код, который вы ищете

$('.info-text > span').text($(this).data('text'));

исправлена ​​публикация баннеров

person Banning    schedule 16.07.2013
comment
$('#info-text › span').text($(this).data('text')); - person Steve; 16.07.2013
comment
Когда я прочитал вопрос, кажется, что ответ, но код ОП, который пытается использовать, действительно сбивает с толку. И да, используйте $(this) внутри обработчика кликов - person A. Wolff; 16.07.2013
comment
Обновил ответ ... извините, копировал и вставлял довольный существующим кодом JSNooB, лол - person Banning; 16.07.2013
comment
Хм, я получаю следующую ошибку TypeError: $(...).data(...).add не является функцией Теперь мой код выглядит так: $('#carousel ul.slides › li').click(function (){ $('#info-text › span').text($(this).data('text')); console.log(this); }); - person JSNooB; 16.07.2013
comment
Если ваш код выглядит так <script> $('#carousel ul.slides > li').click(function(){ $('#info-text > span').text($(this).data('text')); console.log(this); }); </script>, то вы не должны получать ошибку... .add is not a function означает, что где-то там все еще есть .add. Удалите его, и вы должны быть хорошими. - person Banning; 16.07.2013
comment
а, понял :-) Я получал ошибку из-за некоторых неправильных вещей в моем файле custom.js. Мне не нравится реализовывать JS по тегу script в html-файле. Код Баннинга работает нормально. Есть только одна ошибка, контейнер получает класс с именем info-text, а не идентификатор. Но я отредактирую это. Так что большое спасибо! - person JSNooB; 16.07.2013
comment
Ах, извините, у меня было #info-text, потому что это было в вашем вопросе, и я просто скопировал и вставил .. Я обновлю ответ для вас :) - person Banning; 16.07.2013