如何重用jquery单击函数？

我有一套

应用了

.pro

类。单击时，每个列表项都会显示一个特定的滑块。我有一些JQuery代码来控制隐藏和显示行为，但是对于每个

，我都使用了单独的显示和隐藏片段，使得整个代码都很长

如何重构代码（如下）以减少代码量

$（“.pro1”）。单击（函数（）{
$（“.slider2”）.hide（）；
$（“.slider1”）.show（）；
});
$（“.pro2”）。单击（函数（）{
$（“.slider1”）.hide（）；
$（“.slider2”）.show（）；
});

---

它无限地继续…

您不必为每个

li

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

li

该循环可以使用方法完成

现在，对于每个

li

，我们需要隐藏一个特定的滑块并显示另一个。这意味着我们需要得到我们想要展示的幻灯片的价值。为此，我们可以将下一张幻灯片的值存储在

li

中。为此，我们可以使用

此代码应该可以帮助您：

$（“.mySlide”）.hide（）；
$（'.pro'）。单击（函数（）{
var li=$（本）；
nextSlide=li.attr（“数据显示”）；
$（“.mySlide”）.hide（）；
$（“#”+nextSlide.show（）；
});
.mySlide{
背景色：红色；
高度：50px；
宽度：100px；
}


幻灯片1
幻灯片2
幻灯片3'
幻灯片4'
幻灯片5'



这是幻灯片1
这是幻灯片2
这是幻灯片3
这是幻灯片4
这是幻灯片5
$（“.pro”）。each（）
，请您指定……我是jquery和jsp的新手。有几种方法可以做到这一点。如果您可以提供一些HTML来显示上下文和更多的循环函数，那么就更容易找到一个有效的解决方案。现在我在问自己几个问题。您是只切换两个滑块还是有更多滑块？所有列表项类名是
.pro
还是
.pro1
、
.pro2
、
.pro3
等？单击的列表项与显示或隐藏的滑块之间是否存在关系o） 是否需要将
包装起来。在
中单击（）
。每个（）
<代码>$（'.pro'）。每个（函数（）{$（this）.click（函数（）{…}）}）

似乎有点冗长。为什么不直接使用

$（'.pro'）。单击（…）

？