Question

我有一组<li>已应用.pro类。单击时，每个列表项都会显示一个特定的滑块。我有一些JQuery代码来控制隐藏和显示行为，但对于每个<li>我使用单独的show和hide片段使整个代码冗长。

如何重构我的代码（如下所示）以减少代码量？

$(".pro1").click(function(){
    $(".slider2").hide();

    $(".slider1").show();
});

$(".pro2").click(function(){
    $(".slider1").hide();

    $(".slider2").show();
});

并且它无限地继续......

Answer 1

您不必为每个li分配不同的类，您只需要使用一个类，并使用它来循环所有li。

循环可以使用jquery.each()方法完成。

现在，对于li中的每一个，我们需要隐藏一个特定的滑块并显示另一个。意味着我们需要获取我们想要显示的幻灯片的值。为此，我们可以将下一张幻灯片的值存储在li中。为此，我们可以使用HTML data-* attributes。

此代码可以帮助您：

＆＃13;

$(".mySlide").hide();

$('.pro').click(function(){
    var li = $(this);
    nextSlide = li.attr("data-show");
    $(".mySlide").hide();
    $("#"+nextSlide).show();
});

＆＃13;

.mySlide{
  background-color : red;
  height : 50px;
  width : 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class='pro' data-show='slide1'>Slide 1</li>
<li class='pro' data-show='slide2'>Slide 2</li>
<li class='pro' data-show='slide3'>Slide 3</li>
<li class='pro' data-show='slide4'>Slide 4</li>
<li class='pro' data-show='slide5'>Slide 5</li>
</ul>
<br>
<div class='mySlide' id='slide1'> 
 <h3> This is slide 1 </h3>
</div>
<div class='mySlide' id='slide2'> 
 <h3> This is slide 2 </h3>
</div>
<div class='mySlide' id='slide3'> 
 <h3> This is slide 3 </h3>
</div>
<div class='mySlide' id='slide4'> 
 <h3> This is slide 4 </h3>
</div>
<div class='mySlide' id='slide5'> 
 <h3> This is slide 5 </h3>
</div>

＆＃13;

如何重用jquery点击功能？

1 个答案: