Question

我需要用jQuery创建一个小滑块。我尝试了下面的代码，但它不起作用。任何想法如何解决它？这是我的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>

我在setFramePosition()上调用了.sliderRight函数，在点击事件上调用了.sliderLeft

Answer 1

使用此：

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);
            });

你也可以使用：

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

请找到问题的解决方案。已经使演示位动态

        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 个答案: