多个jQuery导航滑块

时间：2018-04-23 16:25:27

标签： javascript jquery onclick

如何让nav sliders独立工作 ？正如您所看到的，第二个nav按钮控制了slides中的post，但我需要它们独立工作，而不必更改class结构。 

$(function() {
  $('.post a').on('click', function(e) {
    e.preventDefault()
    showSlide($(this).index());
  });

  showSlide(0);

  function showSlide(index) {
    // Make the post__slide post__slide--visible
    $('.post .post__slide').removeClass('post__slide--visible');
    $('.post .post__slide').eq(index).addClass('post__slide--visible');

    // Set the tab to post__nav--selected
    $('.post a').removeClass('post__nav--selected');
    $('.post a').eq(index).addClass('post__nav--selected');
  }
});
.post {
  position: relative;
}

.post .post__nav {
  display: flex;
  border: 2px solid;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100px;
}

.post .post__nav a {
  padding: 20px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.post .post__nav a:hover,
.post .post__nav a.post__nav--selected {
  color: #737d8b;
  font-weight: 700;
}

.post .post__slide {
  position: absolute;
  top: 0px;
  left: 100px;
  width: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}

.post .post__slide.post__slide--visible {
  width: calc(100% - 100px);
  overflow: scroll;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
  <div class="post__menu">
    <nav class="post__nav">
      <a>post__slide #1</a>
      <a>post__slide #2</a>
      <a>post__slide #3</a>
    </nav>
  </div>
  <div class="post__slide">
    <p>post__slide #1</p>
  </div>
  <div class="post__slide">
    <p>post__slide #2</p>
  </div>
  <div class="post__slide">
    <p>post__slide #3</p>
  </div>
</div>
<div class="post">
  <div class="post__menu">
    <nav class="post__nav">
      <a>post__slide #1</a>
      <a>post__slide #2</a>
      <a>post__slide #3</a>
    </nav>
  </div>
  <div class="post__slide">
    <p>post__slide #1</p>
  </div>
  <div class="post__slide">
    <p>post__slide #2</p>
  </div>
  <div class="post__slide">
    <p>post__slide #3</p>
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

如果我理解正确，您只想在其幻灯片容器内显示一张幻灯片。

您的代码有问题：

$('.post .post__slide')会在class = post中查找这两个div中的所有.post__slide。您预期的结果应该只是查询用户单击的幻灯片容器中的.post__slide。

我的想法，

使用.jQuery()的第二个参数来控制选择器上下文。

正如JQuery定义的那样：

  

选择器上下文

     

默认情况下，选择器在DOM开始时执行搜索   在文档根目录。但是，可以给出替代上下文   通过使用可选的第二个参数到$（）函数进行搜索。   例如，要在事件处理程序中进行搜索，搜索可以是   限制如下：1 2 3

     

$（＆＃34; div.foo＆＃34;）。click（function（）{$（＆＃34; span＆＃34;，this）.addClass（＆＃34; bar＆＃34;   ）; }）;

     

当搜索范围选择器仅限于上下文时   这样，只有点击元素中的跨度才能获得额外的元素   类。

     

在内部，选择器上下文是使用.find（）方法实现的，   所以$（＆＃34; span＆＃34;，this）相当于$（this）.find（＆＃34; span＆＃34;）。

工作代码：

＆＃13;
＆＃13; 
// first parameter: slide container
// second parameter: the index of the slide
function showSlide(slideContainer, index) {
  // Make the post__slide post__slide--visible
  $('.post__slide', slideContainer).removeClass('post__slide--visible');
  $('.post__slide', slideContainer).eq(index).addClass('post__slide--visible');

  // Set the tab to post__nav--selected
  $('a', slideContainer).removeClass('post__nav--selected');
  $('a', slideContainer).eq(index).addClass('post__nav--selected');
}

$(function() { 
  $('.post a').on('click', function(e) {
    e.preventDefault()
    showSlide($(this).parent().parent().parent(),$(this).index());
  });
  // load default slide
  $('.post').each(function(index, item) {
    showSlide(item, 0);
  });
});
＆＃13; 
.post {
  position: relative;
}

.post .post__nav {
  display: flex;
  border: 2px solid;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100px;
}

.post .post__nav a {
  padding: 20px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.post .post__nav a:hover,
.post .post__nav a.post__nav--selected {
  color: #737d8b;
  font-weight: 700;
}

.post .post__slide {
  position: absolute;
  top: 0px;
  left: 100px;
  width: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}

.post .post__slide.post__slide--visible {
  width: calc(100% - 100px);
  overflow: scroll;
  opacity: 1;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
  <div class="post__menu">
    <nav class="post__nav">
      <a>post__slide #1</a>
      <a>post__slide #2</a>
      <a>post__slide #3</a>
    </nav>
  </div>
  <div class="post__slide">
    <p>post__slide #1</p>
  </div>
  <div class="post__slide">
    <p>post__slide #2</p>
  </div>
  <div class="post__slide">
    <p>post__slide #3</p>
  </div>
</div>
<div class="post">
  <div class="post__menu">
    <nav class="post__nav">
      <a>post__slide #1</a>
      <a>post__slide #2</a>
      <a>post__slide #3</a>
    </nav>
  </div>
  <div class="post__slide">
    <p>post__slide #1</p>
  </div>
  <div class="post__slide">
    <p>post__slide #2</p>
  </div>
  <div class="post__slide">
    <p>post__slide #3</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如果您只是想寻找快速解决方案并且没有计划添加更多幻灯片，您可以在showSlide函数中添加另一个选项，然后快速检查这些类。

我认为你因为CSS关系而不想编辑类 - 但是在第二个滑块上添加一个额外的类不会改变它的外观。

同样，这是一种快速简便的方法 - 有更复杂的方法来实现这一点，并且可以更好地遵循DRY原则。

为了解释，第二个滑块上的新类允许我检查它所在的滑块（hasClass），然后根据父级＆＃39;分配（2）或（＆＃39;＆＃39;）。上课。在showSlide函数中，我使用数字变量来构建选择器 - 所以如果它是2，那么它将以新类为目标 - 否则它不会添加任何内容。

＆＃13;
＆＃13; 
$(function() {
  $('.post a').on('click', function(e) {
    e.preventDefault()
if ($(this).parent().hasClass('post__nav2')) {
     var number = '2'
     showSlide($(this).index(), number)
  } else {
     var number = ''
    showSlide($(this).index(), number);
}
  });

  showSlide(0);

  function showSlide(index, number) {
    // Make the post__slide post__slide--visible
    $('.post' + number + ' ' + '.post__slide' + number).removeClass('post__slide--visible');
    $('.post' + number + ' ' + '.post__slide' + number).eq(index).addClass('post__slide--visible');

    // Set the tab to post__nav--selected
    $('.post' + number + ' ' + 'a').removeClass('post__nav--selected');
    $('.post' + number + ' ' + 'a').eq(index).addClass('post__nav--selected');
  }
});
＆＃13; 
.post {
  position: relative;
}

.post .post__nav {
  display: flex;
  border: 2px solid;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100px;
}

.post .post__nav a {
  padding: 20px 0px;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.post .post__nav a:hover,
.post .post__nav a.post__nav--selected {
  color: #737d8b;
  font-weight: 700;
}

.post .post__slide {
  position: absolute;
  top: 0px;
  left: 100px;
  width: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}

.post .post__slide.post__slide--visible {
  width: calc(100% - 100px);
  overflow: scroll;
  opacity: 1;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
  <div class="post__menu">
    <nav class="post__nav">
      <a>post__slide #1</a>
      <a>post__slide #2</a>
      <a>post__slide #3</a>
    </nav>
  </div>
  <div class="post__slide">
    <p>post__slide #1</p>
  </div>
  <div class="post__slide">
    <p>post__slide #2</p>
  </div>
  <div class="post__slide">
    <p>post__slide #3</p>
  </div>
</div>
<div class="post post2">
  <div class="post__menu post__menu2">
    <nav class="post__nav post__nav2">
      <a>post__slide #1</a>
      <a>post__slide #2</a>
      <a>post__slide #3</a>
    </nav>
  </div>
  <div class="post__slide post__slide2">
    <p>post__slide #1</p>
  </div>
  <div class="post__slide post__slide2">
    <p>post__slide #2</p>
  </div>
  <div class="post__slide post__slide2">
    <p>post__slide #3</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题