Javascript Question
Display only one div on hover
I'm doing a project using Wikipedia API where user can type some name in search and get results from Wikipedia. So i have most of the work but one issue got in my way. When i hover "each-list" div, "show-more" div is displayed from the right side of the parent div which is "each-list" div. Then i hover over "show-more" div which causes appearance of another div called "titleDesc". The problem is when i hover over "show-more" div all "titleDesc" divs displayed whereas i need only one related div to appear.
Javascript code
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();
This code is responsible for display of "titleDesc"
$('.show-more').hover(
function() {
$('.titleDesc').show();
}
);
How to make only this div to display?
If you want more details about the project feel free to review it.
Answer Source
$(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();
(*) The generated markup is invalid. The <span> element is only allowed to contain other inline elements and no block elements (<div>)