I am currently working on a project that involves utilizing the Wikipedia API to allow users to search for and retrieve information from Wikipedia. I have made significant progress, but I have encountered an issue. When hovering over the "each-list" div, the "show-more" div appears from the right side of its parent div, which is the "each-list" div. Subsequently, when hovering over the "show-more" div, another div called "titleDesc" is displayed. The problem lies in the fact that all "titleDesc" divs appear when hovering over the "show-more" div, whereas I only want the related div to be displayed.
Here is the JavaScript code I am using:
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>'
);
}
$('.show-more').hover(
function() {
$('.titleDesc').hide();
$(this).parent().find('.titleDesc').show();
}
);
}
})
return false;
});
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();
This section of code controls the display of the "titleDesc" div:
$('.show-more').hover(
function() {
$('.titleDesc').hide();
$(this).parent().find('.titleDesc').show();
}
);
By making this adjustment, only the relevant div should be displayed when hovering over the "show-more" div.
If you would like more information about the project, please feel free to review it. https://i.sstatic.net/ple1r.png