我是jQuery的新手,写了一些jQuery代码,当用户点击每个团队的团队徽标时,显示每个足球队的信息。
我使用index()
来确定点击了哪个<div>
元素。
我认为,如果不使用index()
来编写此代码,并且未指定带有<p>
类的a,b and c
元素,则必须更好地编写此代码。
希望你能提供帮助,这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-card{
width: 30%;
margin-right: 10px;
background-color: gainsboro;
cursor: pointer;
display: inline-block;
}
/*.w3-card:hover{*/
/*background-color: #B0B0B0;*/
/*}*/
p{
text-align: center;
font-family: Arial, sans-serif;
font-weight: bold;
}
img{
margin-left: auto;
margin-right: auto;
display: block;
}
.container{
width: 50%;
margin: auto;
}
.imgc{
margin-left: 20px;
margin-right: -20px;
}
.info{
width: 100%;
background-color: #82ABE5;
display: none;
padding: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
var a = "Juventus is one of the strongest team in Italy";
var b = "Barcelona is a spanish team";
var c = "Real madrid has the most awards in europe";
$('.w3-card').hover(function () {
$(this).css("background-color", "#B0B0B0");
},
function () {
$(this).css("background-color", "gainsboro");
});
$('.w3-card').click(function () {
var index = $(this).index();
$('.info').slideUp(400, function () {
$('p.a').hide();
$('p.b').hide();
$('p.c').hide();
if(index == 0){
$('.info').slideDown(400);
$('.a').show();
}
if(index == 1){
$('.info').slideDown(400);
$('.b').show();
}
if(index == 2){
$('.info').slideDown(400);
$('.c').show();
}
});
})
});
</script>
</head>
<body>
<div class="container">
<div class="imgc">
<div class="w3-panel w3-card"><img src="img/juve.png"><p>Juventus</p></div>
<div class="w3-panel w3-card"><img src="img/barca.png"><p>Barcelona</p></div>
<div class="w3-panel w3-card"><img src="img/real.png"><p>Real Madrid</p></div>
</div>
<div class="info">
<p class="a">Juventus Football Club colloquially known as Juve is a professional Italian association football club based in Turin, Piedmont.</p>
<p class="b">Futbol Club Barcelona commonly known as Barcelona and familiarly as Barça is a professional football club based in Barcelona, Catalonia, Spain.</p>
<p class="c">Real Madrid Club de Fútbol Royal Madrid Football Club), commonly known as Real Madrid, or simply as Real outside Spain frontiers, is a professional football club based in Madrid, Spain.</p>
</div>
</div>
</body>
</html>
答案 0 :(得分:2)
执行此操作的一种方法是在可点击元素上设置自定义data-*
属性。你已经在使用一个普通的类了,所以这并没有太大的改变:
<div class="w3-panel w3-card" data-target="a">
然后使用它:
$('.w3-card').click(function () {
var target = $(this).data("target");
$('.info').slideUp(400, function () {
$('.info').slideDown(400);
$('.' + target).show();
});
});
答案 1 :(得分:0)
在我看来,最好的重构是将信息拉出到一个javascript变量中,这样你就不会有这么多的dom元素。随着页面上更多的足球/足球队,可能很难管理。
使用此重构,您将创建一个对象来保存所有团队的信息,然后在单击其中一个图像时插入#info
div。这是代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.w3-card{
width: 30%;
margin-right: 10px;
background-color: gainsboro;
cursor: pointer;
display: inline-block;
}
/*.w3-card:hover{*/
/*background-color: #B0B0B0;*/
/*}*/
p{
text-align: center;
font-family: Arial, sans-serif;
font-weight: bold;
}
img{
margin-left: auto;
margin-right: auto;
display: block;
}
.container{
width: 50%;
margin: auto;
}
.imgc{
margin-left: 20px;
margin-right: -20px;
}
#info{
width: 100%;
background-color: #82ABE5;
display: none;
padding: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
var a = "Juventus is one of the strongest team in Italy";
var b = "Barcelona is a spanish team";
var c = "Real madrid has the most awards in europe";
var info = {
juve: 'Juventus Football Club colloquially known as Juve is a professional Italian association football club based in Turin, Piedmont.',
barca: 'Futbol Club Barcelona commonly known as Barcelona and familiarly as Barça is a professional football club based in Barcelona, Catalonia, Spain.',
real: 'Real Madrid Club de Fútbol Royal Madrid Football Club), commonly known as Real Madrid, or simply as Real outside Spain frontiers, is a professional football club based in Madrid, Spain.'
};
$('.w3-card').hover(function () {
$(this).css("background-color", "#B0B0B0");
},
function () {
$(this).css("background-color", "gainsboro");
});
$('.w3-card').click(function () {
var team = $(this).data('team');
$('#info').slideUp(400, function () {
$('#info').html('<p>' + info[team] + '</p>').slideDown(400);
});
})
});
</script>
</head>
<body>
<div class="container">
<div class="imgc">
<div class="w3-panel w3-card" data-team='juve'><img src="img/juve.png"><p>Juventus</p></div>
<div class="w3-panel w3-card" data-team='barca'><img src="img/barca.png"><p>Barcelona</p></div>
<div class="w3-panel w3-card" data-team='real'><img src="img/real.png"><p>Real Madrid</p></div>
</div>
<div id="info"></div>
</div>
</body>
</html>
&#13;