使用多个隐藏/显示div减少javascript

我希望有人能帮助我

我拼凑了一个脚本来创建一组缩略图，当鼠标悬停在一个链接上时，该链接将在幻灯片上的div中显示更多信息

我需要多个我已经创建的实例，但是每当我想添加一个新项目（这就是这些缩略图），我每次添加一个实例时都必须添加到javascript中。我需要这个来与CMS一起工作，所以添加到javascript是不可能的

我对javascript的理解还不足以解决如何减少JS，而不必添加

$（“#projectX”）。slideDown（500）我添加新项目的时间。到目前为止，我的代码如下。我基本上不希望每次输入另一个缩略图和向上滑动div配对时都必须编写一段javascript

HTML:


X


幻灯片1
同侧眼睑



X


幻灯片2
同侧眼睑



X


幻灯片3
同侧眼睑



拇指1
同侧眼线

查看更多
拇指2
同侧眼线

查看更多
拇指3
同侧眼线

查看更多

JS:

$（函数（）{
$（“#幻灯片1”）。响应幻灯片({
汽车：错，
传呼机：错，
导航：是的，
速度:500,，
名称空间：“回调”，
前：函数（）{
$（'.events'）。追加（
在事件激发之前。
）；
},
之后：函数（）{
$（'.events'）。在激发事件后追加（
。
）；
}
});
});
$（函数（）{
$（“#幻灯片2”）。响应幻灯片({
汽车：错，
传呼机：错，
导航：是的，
速度:500,，
名称空间：“回调”，
前：函数（）{
$（'.events'）。追加（
在事件激发之前。
）；
},
之后：函数（）{
$（'.events'）。在激发事件后追加（
。
）；
}
});
});
$（函数（）{
$（“#幻灯片3”）。响应幻灯片({
汽车：错，
传呼机：错，
导航：是的，
速度:500,，
名称空间：“回调”，
前：函数（）{
$（'.events'）。追加（
在事件激发之前。
）；
},
之后：函数（）{
$（'.events'）。在激发事件后追加（
。
）；
}
});
});
$（文档）.ready（函数（）{
$（“.project2”）。单击（函数（）{
$（“#项目2”）。向下滑动（500）；
$（“项目1”）。幻灯片（500）；
$（“#项目3”）。幻灯片（500）；
});
$（“.project1”）。单击（函数（）{
$（“#项目1”）。向下滑动（500）；
$（“#项目2”）。幻灯片（500）；
$（“#项目3”）。幻灯片（500）；
});
$（“.project3”）。单击（函数（）{
$（“#项目3”）。向下滑动（500）；
$（“项目1”）。幻灯片（500）；
$（“#项目2”）。幻灯片（500）；
});
$（“.hide”）。单击（函数（）{
$（“项目1”）。幻灯片（500）；
$（“#项目2”）。幻灯片（500）；
$（“#项目3”）。幻灯片（500）；
});
});

我真的希望这是有意义的，任何与此相关的帮助都会非常出色

谢谢
您需要查看不同的选择器类型。任何以
#
开头的内容都是通过
id
引用元素（应该是唯一的，因此只返回1个元素）。任何以
开头的内容都是通过
类
引用元素

编辑：

刚刚意识到您需要将一个单独的元素操纵到单击的元素。好的，为了确保这是通用的，您需要确保“按钮”和“幻灯片”的顺序是相同的。我们将找到单击按钮的
索引
，然后使用相同的逻辑滑动相应的
div
。
你可以给你的按钮一类“项目按钮”，给你的项目一类“项目”

因此，为了使您的代码普遍适用于一个侦听器，您可以为所有
项目
设置一类
项目
，然后执行以下操作：

// Attach the same click listener to all elements which have class `project-button`
$('.project-button').on('click', function () {
    // Get the index of this clicked button
    var myIndex = $(this).index();
    // Now get the corresponding `slide`
    var mySlide = $('.project').get(myIndex);
    // Get all `.project`'s then exclude `mySlide`and slide up
    $('.project').not(mySlide).slideUp(500);
    // Now slide down just `mySlide`
    $(mySlide).slideDown(500);
});

$(function () {
  $(".rslides").responsiveSlides({
    auto: false,
    pager: false,
    nav: true,
    speed: 500,
    namespace: "callbacks",
    before: function () {
      $('.events').append("<li>before event fired.</li>");
    },
    after: function () {
      $('.events').append("<li>after event fired.</li>");
    }
  });
});

演示：
您需要查看不同的选择器类型。任何以
#
开头的内容都是通过
id
引用元素（应该是唯一的，因此只返回1个元素）。任何以
开头的内容都是通过
类
引用元素

编辑：

刚刚意识到您需要将一个单独的元素操纵到单击的元素。好的，所以要确保这是有效的
// Attach the same click listener to all elements which have class `project-button`
$('.project-button').on('click', function () {
    // Get the index of this clicked button
    var myIndex = $(this).index();
    // Now get the corresponding `slide`
    var mySlide = $('.project').get(myIndex);
    // Get all `.project`'s then exclude `mySlide`and slide up
    $('.project').not(mySlide).slideUp(500);
    // Now slide down just `mySlide`
    $(mySlide).slideDown(500);
});

$(".hidden").click(function(){;
    $(this).slideDown(500);
    ($(this).siblings()).each(function( index ) {
      $( this ).slideUp(500);
     });
});

<button id="project1" class="project1 link">VIEW MORE</button>

$('.link').click(function(){
    //slideUp all div with class hidden
    $('div.hidden').slideUp(500);
    //slideDown div with id equals the clicked button
    $('div#'+$(this).attr('id')).slideDown(500);
});

$(function () {
  $(".rslides").responsiveSlides({
    auto: false,
    pager: false,
    nav: true,
    speed: 500,
    namespace: "callbacks",
    before: function () {
      $('.events').append("<li>before event fired.</li>");
    },
    after: function () {
      $('.events').append("<li>after event fired.</li>");
    }
  });
});