0
jQueryの初心者です。ユーザーが各チームのチームロゴをクリックすると、各フットボールチームについての情報を表示するjQueryコードを書きました。jQueryでもっと良い方法を見つけようとしています
私はどれが<div>要素がクリックされたかを調べるためにindex()を使用しました。
そして、これにindex()を使用せずに、このコードを書くにはより良い方法でなくてはならないと思います。そして、要素をクラス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>
あなたは、HTMLを構成しているかによって自分自身にこれは難しい作っています。 1つのコンテナにイメージと1つのコンテナを持つ代わりに、それぞれのイメージで情報をグループ化してみませんか？ – satnam
もう1つの解決策は、各部門チーム（data-team = "a" "など）にデータ属性を追加し、対応する情報を表示します： '$（'。$ {team} '）.show（）;'。 –
あなたのタイトルをあなたの質問に関係するように編集してください。 「jqueryでより良い方法を見つけようとしている」というのは、人々がこの質問を見つけるのに役立つものではありません。 –