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

Question

我希望有人能好心地帮助我。

我已经修补了一个脚本来创建一组缩略图，当鼠标悬停在缩略图上时，会显示一个链接，该链接将在向上滑动的 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);
      });
    });

我真的希望这是有道理的，任何对此的帮助都会很棒。

谢谢

Answer 1

您需要研究不同的选择器类型。 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);
});

演示:http://jsfiddle.net/robschmuecker/jPyk6/