Отображать только один div при наведении

javascript jquery html css

61 просмотра

1 ответ

Я делаю проект с использованием API Википедии, где пользователь может ввести имя в поиске и получить результаты из Википедии. Так что у меня большая часть работы, но одна проблема встала у меня на пути. При наведении курсора на div «каждый список» div «show-more» отображается с правой стороны родительского элемента div, который является div «each-list». Затем я наведите курсор на div «show-more», который вызывает появление другого div, называемого «titleDesc». Проблема в том, что когда я наведите курсор мыши на отображаемый div «more-more», все div «titleDesc» отображаются, а для отображения мне нужен только один связанный div.

Javascript код

var apiKey = "*****";
var appendApiKeyHeader = function(xhr) {
  xhr.setRequestHeader('Api-Key', apiKey)
};

var name = "Eminem";
var searchRequest = {
  "phrase": name
}

$('#search').click(function() {

  var foundArticle = $("#query").val();

  console.log(foundArticle);

  var wikiUrl = 'http://en.wikipedia.org/w/api.php?action=opensearch&search=' + foundArticle + '&format=json&callback=wikiCalback';

  // Clear content before AJAX call
  $(".list-container").html("");

  $.ajax({
      url: wikiUrl,
      dataType: "jsonp",
      success: function(response) {
          var artList = response[1];
          console.log(artList);
          for (var i = 0; i < artList.length; i++) {
            var title = artList[i];
            console.log("Number" + " " + i + " " + title);
            var titleDesc = response[2][i];
            console.log("Number" + " " + i + " " + titleDesc);
            var url = 'http://en.wikipedia.org/wiki/' + title;

            $(".list-container").append(
              '<span class = "each-list">' +
              '<a href="' + url + '" target="_blank" >' +
              title +
              '</a>' +
              '<div class="show-more">' +

              '<div id="show-more-inner">MORE</div>' +

              '</div>' +

              '</span>' +

              '<div class="titleDesc">' + '<p>' + titleDesc + '</p>' + '</div>'

            );

          } // end of "for" loop

          $('.show-more').hover(

            function() {
              $('.titleDesc').show();
            }

          );
        } // success function end

    }) // ajax function

  return false;

}); // click function

function GetSearchResults() {
  $.ajax({
    type: "GET",
    beforeSend: appendApiKeyHeader,
    url: "https://api.gettyimages.com/v3/search/images",
    data: searchRequest
  }).success(function(data, textStatus, jqXHR) {
    var uri = data.images[0].display_sizes[0].uri;
    $(".images").append('<img src = "' + uri + '" />');
    console.log(data);

  }).fail(function(data, err) {

    console.log(data);

  });
}

GetSearchResults();

Этот код отвечает за отображение titleDesc

  $('.show-more').hover(

    function() {
      $('.titleDesc').show();
    }

  );

Как сделать только этот div для отображения?

Если вы хотите получить более подробную информацию о проекте, не стесняйтесь просмотреть его. введите описание изображения здесь

Автор: NZMAI Источник Размещён: 08.11.2019 11:13

Ответы (1)


1 плюс

Решение
$(this)                 // the ".show_more" element which triggered the "hover" event
  .parent(".each-list") // the enclosing ".each-list" <span> (*)
  .next(".titleDesc")   // the next sibling with class "titleDesc"
  .show();

(*) Сгенерированная разметка недействительна. <span>Элемент разрешается только содержать другие элементы , встроенные и ни одного блока элементов ( <div>)

Автор: Andreas Размещён: 20.08.2016 11:14
Вопросы из категории :
32x32