Как получить текст в элементе данных для отображения в другом элементе div при наведении определенного «элемента» на странице

0

Пример:

На этой странице есть только две части заголовка и контента. В содержании 100 ссылок. (путь больше в моем случае). Каждая ссылка имеет 4 data- атрибута. data-, data-, data- и data- zip. Каждая ссылка в контенте имеет эти 4 атрибута, и каждый из них отличается. Как я могу сделать так, чтобы, когда я наводил ссылку на эти атрибуты data-, данные для этой ссылки появляются в div в моем заголовке? Поэтому каждая новая ссылка, которую я наводил на эти данные, появится в заголовке.

Я посмотрел материал на "popunders", но я не уверен, что мне нужно.

Заранее спасибо!

Теги:

2 ответа

0
Лучший ответ

Я предполагаю, что вы можете использовать JQuery. Ниже вы можете работать для вас.

Шаг 1: Вы можете использовать мышь на якоре $( "#id_anchor").mouseover(function() { });

Шаг 2: $(this).data('data-name');

Это будет происходить под событием, Получить другие значения и объединить их

Шаг 3: $('#Output-div').html(value)//show the concatenated values in the output DIV

Весь код будет как ниже

var divStr;
$( "#id_anchor" ).mouseover(function() {
  divStr += $(this).data('data-name'); 
  divStr += $(this).data('data-time'); 
  divStr += $(this).data('data-date'); 
  divStr += $(this).data('data-zip'); 
  // you can also format the data here like the way you want
});
$('#Output-div').html(divStr)
Поделиться
  • 0
    В любом случае, вы можете показать jsfiddle? Извините, я новичок в JS.
  • 0
    Можете ли вы создать мне один jsfiddle с вашим HTML. Затем я могу обновить часть JS.
Показать ещё 8 комментариев
1

попробуйте с этим FIDDLE

$(document).ready(function(){
    var a ;
    var header = $("#header");
    $(".link").mouseover(function(){
        a = "Name : "+$(this).data('name') + " Date : "+$(this).data('date')+ " Time : "+$(this).data('time')+ " Zip : "+$(this).data('zip');
        $("#header").text(a);
    }).mouseleave(function(){
        $("#header").text("Hello World!");
    });
});
  1. Держите все ссылки с общим class поэтому выбор будет простым.
  2. Запустите функцию mouseover() чтобы получить эти атрибуты данных ссылки
  3. Соедините его с div или покажите его заголовку в вашем случае
Поделиться
  • 0
    Попробуйте сейчас, спасибо за ваш ответ.
  • 0
    Есть ли способ сохранить заголовок в состоянии по умолчанию, когда он не наведен или когда мышь покидает ссылку? IE: приветственное сообщение в заголовке, которое всегда отображается, пока ссылка не будет накрыта.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню