javascript - 如何在打开 slider 的每个选项卡时显示 JS 警报？

Question

我正在使用 liquidslider脚本在我的网页上，我在我的页面上创建了 slider ，html 代码如下所示:

<div class="liquid-slider" id="slider-id">
     <div>
          <h2 class="title">Slide 1</h2>
          // Content goes here
     </div>
     <div>
          <h2 class="title">Slide 2</h2>
          // Content goes here
     </div>
     <div>
          <h2 class="title">Slide 3</h2>
          // Content goes here
     </div>
</div>

还有我当前的 javascript:

$('#slider-1').liquidSlider({
    autoHeight:false,
    slideEaseFunction:'animate.css',
    slideEaseDuration:1000,
    heightEaseDuration:1000,
    animateIn:"fadeIn",
    animateOut:"fadeOut",
    callback: function() {
       var self = this;
       $('.slider-1-panel').each(function() {
           $(this).removeClass('animated ' + self.options.animateIn);
       });
       $('.slider-1-panel').each(function() {
           alert("you opened panel");
       });
     }   
});

目前，每次用户单击面板选项卡时，消息“您打开面板”都会显示 4 次，这是因为这些行:

$('.slider-1-panel').each(function() {
    alert("you opened panel");
});

我如何更改它以便消息在每个面板中只显示一次？稍后我想在每个面板中添加 css 动画，以便在用户选择面板时调用它们，我认为好的开始是知道用户何时选择任何面板。

按照您的建议，我创建了一个 jsfiddle ，我添加了资源，但我无法正常启动和运行，我不知道我在那里做错了什么..但是 css 代码在那里是可见的，希望这对你有帮助

编辑:我决定添加更多细节。我设法创建了一个选项，可以在用户单击任何选项卡时更改所有选项卡:

$('#slider-1').liquidSlider({
     autoHeight:false,
  slideEaseFunction:'animate.css',
  slideEaseDuration:1000,
  heightEaseDuration:1000,
  animateIn:"fadeIn",
  animateOut:"fadeOut",
  callback: function() {
    var self = this;
    $('.slider-1-panel').each(function() {
      $(this).removeClass('animated ' + self.options.animateIn);
    });

    $('#slider-1-nav-ul a').each(function() {
      $(this).css('background', '#'+Math.floor(Math.random()*16777215).toString(16));
      $(this).css('color', '#'+Math.floor(Math.random()*16777215).toString(16));
     })


  }
     });

但现在我需要将 $('#slider-1-nav-ul a').each(function() { 部分更改为不查看所有选项卡，而是查看一个刚刚被点击过的。我该怎么做？

Answer 1

为每个添加类(这里我使用 .tabs ) div元素，它可以很容易地遍历那些 div .使用 jquery each遍历所有div的方法

$('.liquid-slider .tabs').each(
    function() {
        $(this).click(
            function() {
                alert('you open panel ' + $(this)[0].id);
            }
        );
    }
);

编辑

然后在你的元素中试试这个:

$('#slider-1-nav-ul a').each(function() {
        $(this).click(function() {
            $(this).css('background', '#'+Math.floor(Math.random()*16777215).toString(16));
            $(this).css('color', '#'+Math.floor(Math.random()*16777215).toString(16));
        });
     })

解释

每个循环遍历所有 <a>元素，和 this代表被点击的当前元素。然后你改变background和 color这个被点击的元素。

希望对你有帮助!

Demo