Question

我在我的网页上使用liquidslider脚本，我在页面上创建了滑块，html代码如下所示：

<pdf-viewer delegate-handle="my-pdf-container" url="http://pucdocket.s3.amazonaws.com/VA/PUE-2010-00039/122913.pdf" scale="1" show-toolbar="true" ></pdf-viewer>

还有我目前的javascript：

<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>

目前，每次用户点击面板标签时，系统会显示“您打开的面板”消息4次，这是因为这些行：

$('#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");
       });
     }   
});

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

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

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

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

但现在我需要更改$('#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)); }) } });部分，不要查看所有标签，而是查看刚刚点击过的标签。我怎么能这样做？

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

Answer 2

您可以将alert移出each，然后每个面板只会显示一次消息。

Answer 3

为每个<h2>标记添加不同的ID，并在js中添加以下代码

$(".title").click(function(e){ var panelName=$(this).attr('id'); alert(panelName); });

希望这会有所帮助

Answer 4

您需要为每个标签指定一个ID，以便使用您的jquery / javascript

进行引用

<div class="liquid-slider"  id="monitor-slider">
                <div id= "name_this> 
                  <h2 class="title">Slide 1</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
                </div>
                <div id= "name_this_different>
                  <h2 class="title">Slide 2</h2>
                  <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
                </div>          
                <div id= "name_this_different_again> 
                  <h2 class="title">Slide 3</h2>
                  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
                </div>

</div>

$("This").click(function(){
    alert("This tab.");
});

如何在打开滑块的每个选项卡时显示JS警报？

4 个答案: