Question

我对一些定制的轮播逻辑有一些问题。

我需要在我的页面上处理两个事件。当用户按下左键时，我希望选择器成为活动选择器的前一个对象。当用户按下右侧时，活动项应位于“活动”项旁边。

这是html

<li><a href='/vaara'><img src="/media/954/150.jpg" alt="blabla"/></a></li> 
<li><a href='/vaara'><img src="/media/954/150.jpg" alt="blabla"/></a></li>
<li><a href='/vaara'><img src="/media/954/150.jpg" alt="blabla"/></a></li>

中间的元素代表“活跃”元素。

这是我提出的jquery

var activeitem = $("#carousel_ul li:eq(3) a img", this).attr('alt');

现在我想获得prev（）或next（）alt文本。像这样的东西

carouselItemLeft.on('click', function () {
                    var connectedInsurace = activeitem.next();

Answer 1

eq从零开始，因此:eq(3)会选择标记中不存在的第三个li元素，attr会返回undefined。 next是jQuery对象的方法而不是String对象，在您的代码中会生成ReferenceError。

Answer 2

.next()看着下一个兄弟姐妹。您当前的上下文是一个图像，您想要的“下一个”图像包含在列表项和锚中，因此您需要以下内容：

var next = activeItem.closest("li").next().find("img").attr("alt");

Answer 3

您应该为变量命名以反映它们的实际含义。 activeitem不应存储到商品的alt属性中，而应存储实际商品。

假设当前活动的li元素有一个名为active的类。那么您的代码可能如下所示：

carouselItemLeft.on('click', function () {
    var $activeitem = $("#carousel_ul li.active"); // the li, not the img
    var $connectedInsurace = $activeitem.next();
    var alttext = activeitem.find('img').attr('alt');

Answer 4

您最好实际为活动项目分配data- *标签，而不是使用商品上的索引。

所以：

carouselItemLeft.on('click', function () {
      var $connectedInsurace = $('[data-active="true"]');
      $connectedInsurace.data("active", false);
      $(this).data("active", true);

     // Get next item
     var $next = $connectedInsurace.next();
});

jQuery从ul li中的image获取next（）或prev（）属性alt文本

4 个答案: