在jQuery中使用正确的选择器，不需要复制代码

Question

我对jQuery中的选择器有疑问。如果你看看我的小提琴。我需要复制相同的jQuery行，以便它对每个图标做出反应。我确定我只需要第 1-6 行，而是使用更好的选择器。而且，如果我需要在同一页面上使用相同的图标部分 2 次，它会相互干扰。有人有什么建议吗？

$( ".icon:nth-child(1)" ).click(function() {
$( ".icon" ).removeClass( "selected" );
$( ".icon:nth-child(1)" ).toggleClass( "selected" );
$( ".text" ).fadeOut().delay( 500 );
$( ".text:nth-child(1)" ).fadeIn();
});
$( ".icon:nth-child(2)" ).click(function() {
$( ".icon" ).removeClass( "selected" );
$( ".icon:nth-child(2)" ).toggleClass( "selected" );
$( ".text" ).fadeOut().delay( 500 );
$( ".text:nth-child(2)" ).fadeIn();
});
$( ".icon:nth-child(3)" ).click(function() {
$( ".icon" ).removeClass( "selected" );
$( ".icon:nth-child(3)" ).toggleClass( "selected" );
$( ".text" ).fadeOut().delay( 500 );
$( ".text:nth-child(3)" ).fadeIn();
});

.icons {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.icon,
.icon img {
width: 150px;
height: 150px;
}
.icon {
padding: 10px;
}
.icon p {
text-align: center;
font-family: arial;
}
.selected {
border-bottom: 3px solid black;
}
.text {
font-family: arial;
padding: 10px;
}
.hidden {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<section>
<div class="icons">
<div class="icon">
<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png">
<p>
Button 1
</p>
</div>
<div class="icon">
<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png">
<p>
Button 2
</p>
</div>        
<div class="icon">
<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png">
<p>
Button 3
</p>
</div>
</div>
<div class="texts">
<div class="text hidden">
<p>
Text 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo tenetur quos quisquam, in totam dolorem enim nostrum nihil impedit ducimus beatae, eos obcaecati ratione voluptatum recusandae incidunt, quas labore doloremque.
</p>
</div>
<div class="text hidden">
<p>
Text 2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo tenetur quos quisquam, in totam dolorem enim nostrum nihil impedit ducimus beatae, eos obcaecati ratione voluptatum recusandae incidunt, quas labore doloremque.
</p>
</div>
<div class="text hidden">
<p>
Text 3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo tenetur quos quisquam, in totam dolorem enim nostrum nihil impedit ducimus beatae, eos obcaecati ratione voluptatum recusandae incidunt, quas labore doloremque.
</p>
</div>
</div>
</section>

jsFiddle - Icontoggle

Answer 1

使用 $(this(！

$( ".icon" ).click(function() {
$( this ).toggleClass( "selected" );
});

Answer 2

为了使它更加干燥，您可以通过单击的.icon元素的index()将点击的元素与.text相关联，如下所示：

$(".icon").click(function() {
$(".icon").removeClass("selected");
$(this).toggleClass("selected");
$(".text").fadeOut().delay(500).eq($(this).index()).fadeIn();
});

使用这种方法意味着你根本不需要重复你的JS代码，并且可以有无限数量的.icon/.text元素。

$(".icon").click(function() {
$(".icon").removeClass("selected");
$(this).toggleClass("selected");
$(".text").fadeOut().delay(500).eq($(this).index()).fadeIn();
});

.icons {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.icon,
.icon img {
width: 150px;
height: 150px;
}
.icon {
padding: 10px;
}
.icon p {
text-align: center;
font-family: arial;
}
.selected {
border-bottom: 3px solid black;
}
.text {
font-family: arial;
padding: 10px;
}
.hidden {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="icons">
<div class="icon">
<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png">
<p>
Button 1
</p>
</div>
<div class="icon">
<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png">
<p>
Button 2
</p>
</div>
<div class="icon">
<img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png">
<p>
Button 3
</p>
</div>
</div>
<div class="texts">
<div class="text hidden">
<p>
Text 1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo tenetur quos quisquam, in totam dolorem enim nostrum nihil impedit ducimus beatae, eos obcaecati ratione voluptatum recusandae incidunt, quas labore doloremque.
</p>
</div>
<div class="text hidden">
<p>
Text 2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo tenetur quos quisquam, in totam dolorem enim nostrum nihil impedit ducimus beatae, eos obcaecati ratione voluptatum recusandae incidunt, quas labore doloremque.
</p>
</div>
<div class="text hidden">
<p>
Text 3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo tenetur quos quisquam, in totam dolorem enim nostrum nihil impedit ducimus beatae, eos obcaecati ratione voluptatum recusandae incidunt, quas labore doloremque.
</p>
</div>
</div>
</section>

Answer 3

你可以使用 jQuery 的each()方法进行索引：

$( ".icon" ).each(function(index, elem){
$(elem).on('click', function(){
$( ".icon" ).removeClass( "selected" ).eq(index).toggleClass( "selected" );
$( ".text" ).fadeOut().delay( 500 ).eq(index).fadeIn();
});
});

在这里直播 jsBin 。