Question

我正在使用维基百科API进行项目，用户可以在搜索中键入一些名称并从维基百科中获取结果。所以我有大部分的工作，但有一个问题妨碍了我。当我徘徊＆＃34;每个列表＆＃34; div，＆＃34; show-more＆＃34; div从父div的右侧显示，即＆＃34; each-list＆＃34; DIV。然后我将鼠标悬停在＆＃34;显示更多＆＃34; div导致另一个div的出现，名为＆＃34; titleDesc＆＃34;。问题是当我将鼠标悬停在＆＃34; show-more＆＃34; div all＆＃34; titleDesc＆＃34; div显示，而我只需要一个相关的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();

此代码负责显示＆＃34; titleDesc＆＃34;

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

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

  );

如何仅显示此 div？

如果您想了解project的更多详细信息，请随时查看。

Answer 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>）

悬停时只显示一个div

1 个答案: