我希望有人能好心地帮助我。
我已经修补了一个脚本来创建一组缩略图，当鼠标悬停在缩略图上时，会显示一个链接，该链接将在向上滑动的 div 中显示更多信息。
我需要多个我已经成功创建的实例，但是每当我想添加一个新项目(这就是这些缩略图)时，我每次都必须添加到JavaScript中我添加一个实例。我需要它与 CMS 一起使用，因此添加到 javascript 是不可能的。
我对 javascript 的理解还不够好，无法弄清楚如何减少 JS 并且不必添加 $("#projectX").slideDown(500); 即使我添加新的项目。到目前为止我的代码如下。我基本上不想每次输入另一个缩略图并向上滑动 div 配对时都必须编写一段 javascript。
HTML:
<div class="row">
<div class="col-xs-12">
<div class="hidden-work">
<div id="project1" class="hidden">
<div class="callbacks_container">
<button class="hide">X</button>
<ul class="rslides" id="slider2">
<li>
<div class="row">
<div class="col-md-8 col-xs-12">
<img src="img/eejits/fleur.jpg" alt="">
</div>
<div class="col-md-4 col-xs-12">
<div class="caption">
<h3>Slide 1</h3>
<p>Lorem ipsum</p>
</div><!--caption-->
</div><!--col-->
</div><!--row-->
</li>
</ul>
</div><!--callbacks_container-->
</div><!--eejits-->
<div id="project2" class="hidden">
<div class="callbacks_container">
<button class="hide">X</button>
<ul class="rslides" id="slider1">
<li>
<div class="row">
<div class="col-md-8 col-xs-12">
<img src="img/eejits/fleur.jpg" alt="">
</div>
<div class="col-md-4 col-xs-12">
<div class="caption">
<h3>Slide 2</h3>
<p>Lorem ipsum</p>
</div><!--caption-->
</div><!--col-->
</div><!--row-->
</li>
</ul>
</div>
</div><!--project2 (reach)-->
<div id="project3" class="hidden">
<div class="callbacks_container">
<button class="hide">X</button>
<ul class="rslides" id="slider3">
<li>
<div class="row">
<div class="col-md-8 col-xs-12">
<img src="img/eejits/fleur.jpg" alt="">
</div>
<div class="col-md-4 col-xs-12">
<div class="caption">
<h3>Slide 3</h3>
<p>Lorem ipsum</p>
</div><!--caption-->
</div><!--col-->
</div><!--row-->
</li>
</ul>
</div>
</div><!--project3-->
</div><!--work-->
</div>
</div><!--row-->
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="thumb-bg">
<div class="thumb no1">
<div class="content">
<h3>Thumb 1</h3>
<p>Lorem ipsum.</p>
<button class="project1 link">VIEW MORE</button>
</div>
</div>
</div>
</div><!--col-->
<div class="col-sm-4 col-xs-12">
<div class="thumb-bg">
<div class="thumb no2">
<div class="content">
<h3>Thumb 2</h3>
<p>Lorem ipsum.</p>
<button class="project2 link">VIEW MORE</button>
</div>
</div>
</div>
</div><!--col-->
<div class="col-sm-4 col-xs-12">
<div class="thumb-bg">
<div class="thumb no3">
<div class="content">
<h3>Thumb 3</h3>
<p>Lorem ipsum.</p>
<button class="project3 link">VIEW MORE</button>
</div>
</div>
</div>
</div><!--col-->
</div><!--row-->
JS:
$(function () {
$("#slider1").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>");
}
});
});
$(function () {
$("#slider2").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>");
}
});
});
$(function () {
$("#slider3").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>");
}
});
});
$(document).ready(function(){
$(".project2").click(function(){
$("#project2").slideDown(500);
$("#project1").slideUp(500);
$("#project3").slideUp(500);
});
$(".project1").click(function(){
$("#project1").slideDown(500);
$("#project2").slideUp(500);
$("#project3").slideUp(500);
});
$(".project3").click(function(){
$("#project3").slideDown(500);
$("#project1").slideUp(500);
$("#project2").slideUp(500);
});
$(".hide").click(function(){
$("#project1").slideUp(500);
$("#project2").slideUp(500);
$("#project3").slideUp(500);
});
});
我真的希望这是有道理的，任何对此的帮助都会很棒。
谢谢
最佳答案
您需要研究不同的选择器类型。 http://api.jquery.com/category/selectors/任何以 # 开头的内容都通过 id 引用元素(该元素应该是唯一的，因此仅返回 1 个元素)任何以 . 开头的内容引用按 class 到元素
编辑:
刚刚意识到您需要操作一个与单击的元素不同的单独元素。好的，为了确保这普遍适用，您需要确保“按钮”和“幻灯片”的顺序相同。我们将找到单击的按钮的index，然后使用相同的逻辑来滑动适当的div。
您可以为您的按钮指定“project-button”类，为您的项目指定“project”类
因此，为了使您的代码普遍适用于一个监听器，您可以为所有 projects 提供一个 project 类，然后执行如下操作:
// 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);
});
关于javascript - 使用多个隐藏/显示 div 减少 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25105212/