Question

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

$( ".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元素与.text的{{1}}关联起来，如下所示：

index()

使用此方法意味着您根本不需要重复JS代码，并且可以具有无限数量的$(".icon").click(function() { $(".icon").removeClass("selected"); $(this).toggleClass("selected"); $(".text").fadeOut().delay(500).eq($(this).index()).fadeIn(); }); / .icon元素。s

.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;
}

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 here。

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

3 个答案: