[英]How to make a content appear one below the other (like an <li> list) in hover using jquery/js
I'm trying to show some content on hover over the text, where the content lists the various HTTP error codes. 我试图显示一些悬停在文本上方的内容,其中内容列出了各种HTTP错误代码。 Below I have 3 icons and text, on hover, different content will show based on the text I hover: 在我下面有3个图标和文本,在悬停时,根据我悬停的文本将显示不同的内容:
success 成功 error 错误 blocked 受阻
below is the js: 以下是js:
$(".icon").on("hover", function(event){
var ele = $(this);
var myindex = $(this).parent().index();
var longlabel = "";
switch (someData[myindex]) {
case "Success": {
longLabel = '200 OK: Standard response for successfull HTTP requests'
break;
}
case "Blocked" :{
longLabel = 'Error response Code: 403 Developer is not authorized'
break;
}
case "Error" :{
longLabel = 'Error repsonse codes: 400 Bad request, 404 Not Found, 500 Internal Server Error, 503 Service Unavailable, 504 Gateway Timeout'
break;
}
}
nv.tooltip.show('<p>' + longLabel + '</p>');
});
Now i want to be able to show the content in the form of a list on hover, eg: 现在,我希望能够以悬停列表的形式显示内容,例如:
Error response codes:
400 Bad request
404 Not Found
500 Internal Server Error
503 Service Unavailable
504 Gateway Timeout
Instead of which im showing currently: 而不是即时通讯目前显示:
how can i make these codes appear one below the other? 如何使这些代码一个出现在另一个下面? Any ideas?? 有任何想法吗?? Thanks! 谢谢!
Instead of a <p></p>
block, maybe just use a unordered list: <ul></ul>
代替<p></p>
块,也许只使用无序列表即可: <ul></ul>
$(".icon").on("hover", function(event){
var ele = $(this);
var myindex = $(this).parent().index();
var longlabel;
switch (someData[myindex]) {
case "Success": {
longLabel = ['200 OK: Standard response for successfull HTTP requests'];
break;
}
case "Blocked" :{
longLabel = ['403 Developer is not authorized'];
break;
}
case "Error" :{
longLabel = ['400 Bad request', '404 Not Found', '500 Internal Server Error', '503 Service Unavailable', '504 Gateway Timeout'];
break;
}
}
nv.tooltip.show('Error response codes:<br><ul><li>' + longLabel.join('</li><li>') + '</li></ul>');
});
Alternatively just have <br>
in between 另外,也可以在两者之间插入<br>
nv.tooltip.show('Error response codes:<br>' + longLabel.join('<br>'));
$.fn.breakLines = function (text) {
this.text(text);
this.html(this.html().replace(/\n/g, '<br/>'));
return this;
}
$(".icon").on("hover", function (event) {
var ele = $(this);
var myindex = $(this).parent().index();
var longlabel = "";
switch (someData[myindex]) {
case "Success":
{
longLabel = '200 OK: \n Standard response for successfull HTTP requests'
break;
}
case "Blocked":
{
longLabel = 'Error response Code: \n 403 Developer is not authorized'
break;
}
case "Error":
{
longLabel = 'Error repsonse codes: \n 400 Bad request,\n 404 Not Found, \n 500 Internal Server Error, \n 503 Service Unavailable, \n 504 Gateway Timeout'
break;
}
}
nv.tooltip.show().breakLines('<p>' + longLabel + '</p>');;
});
Try this: 尝试这个:
longLabel = 'Error repsonse codes: 400 Bad request, 404 Not Found, 500 Internal Server Error, 503 Service Unavailable, 504 Gateway Timeout';
longLabel = longLabel.replace(/\:/g, ":<br>");
$("p").html(longLabel.replace(/\,/g, ":<br>"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.