为什么这个jQuery代码不起作用

Question

I need to create a small slider with jQuery. 我需要使用jQuery创建一个小的滑块。 I tried the below code but it doesn't work. 我尝试了下面的代码，但是没有用。 Any ideas how to fix it? 任何想法如何解决？ Here is my HTML source: 这是我的HTML来源：

 function setFramePosition(dome, pos) { dome.siblings('span .activeSliderId').text(pos).parent().siblings().find('li:nth-child(' + pos + ')').addClass('selected').siblings().removeClass('selected'); } $("#smallSliderController .sliderRight").click(function() { setFramePosition($(this), 3); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <a> one <img src="1.jpg" alt=""> </a> </li> <li class="selected"> <a> two <img src="2.jpg" alt=""> </a> </li> <li> <a> three <img src="3.jpg" alt=""> </a> </li> </ul> <div class="headerPromotionContainController" id="smallSliderController"> <span><em class="activeSliderId">2</em>/3</span> <button type="button" class="sliderLeft">previous</button> <button type="button" class="sliderRight">next</button> </div>

I called setFramePosition() function on .sliderRight and .sliderLeft on click event 我在点击事件上在.sliderRight和.sliderLeft上调用了setFramePosition()函数

Answer 1

Use this: 用这个：

JS: JS：

    function setFramePosition(dome, pos) {
                    dome.siblings('span').text(pos).parent().siblings().find('li:nth-child(' + pos + ')').addClass('selected').siblings().removeClass('selected');
                }

                $("#smallSliderController .sliderRight").on('click', function () {
                    setFramePosition($(this), 3);
                });
 $("#smallSliderController .sliderLeft").on('click', function () {
                setFramePosition($(this), 1);
            });

you can also use: 您还可以使用：

function setFramePosition(dome, pos) {
                dome.siblings('span').text(pos).parent().siblings().find('li:nth-child(' + pos + ')').addClass('selected').siblings().removeClass('selected');
            }

            $("button").click( function () {
                var $this = $(this);
                if ($this.hasClass('sliderRight'))
                    setFramePosition($this, 3);
                if ($this.hasClass('sliderLeft'))
                    setFramePosition($this, 1);
            });

Answer 2

Please find solution to your problem. 请找到解决您问题的方法。 Had made demo bit dynamic 使演示位变得动态

  var selectedIndex = 1; $("li").each(function (index) { if ($(this).hasClass("selected")) { selectedIndex = index + 1; } }); var totalItems = $("li").length; $(".totalitems").html(totalItems); function RemoveSelection() { $("li").each(function (index) { if ($(this).hasClass("selected")) { $(this).removeClass("selected"); } }); } $(document).ready(function () { $(".sliderLeft").click(function () { if ((selectedIndex - 1) > 0) { selectedIndex = selectedIndex - 1; } else { selectedIndex = $("li").length; } RemoveSelection(); $(".activeSliderId").html(selectedIndex); $("li").eq(selectedIndex - 1).addClass("selected"); }); $(".sliderRight").click(function () { if ((selectedIndex + 1) <= $("li").length) { selectedIndex = selectedIndex + 1; } else { selectedIndex = 1; } RemoveSelection(); $(".activeSliderId").html(selectedIndex); $("li").eq(selectedIndex - 1).addClass("selected"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta name='viewport' content='1100, initial-scale=1.0, user-scalable=yes' /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Test</title> <style type="text/css"> .selected { color: red; } </style> </head> <body> <ul> <li> <a> one <img src="1.jpg" alt=""> </a> </li> <li class="selected"> <a> two <img src="2.jpg" alt=""> </a> </li> <li> <a> three <img src="3.jpg" alt=""> </a> </li> </ul> <div class="headerPromotionContainController" id="smallSliderController"> <span><em class="activeSliderId">2</em>/<em class="totalitems">2</em></span> <button type="button" class="sliderLeft">previous</button> <button type="button" class="sliderRight">next</button> </div> </body> </html>

为什么这个jQuery代码不起作用

问题描述

2 个解决方案

解决方案1
0 2016-11-11 12:51:49

解决方案2
0 2016-11-11 14:17:45

为什么这个jQuery代码不起作用

问题描述

2 个解决方案

解决方案1 0 2016-11-11 12:51:49

解决方案2 0 2016-11-11 14:17:45

解决方案1
0 2016-11-11 12:51:49

解决方案2
0 2016-11-11 14:17:45