Javascript 需要jQuery帮助向对象数组添加类吗

我的jquery技能并不优秀。我通常做的是使用插件，然后最终确定我需要做什么

我现在要做的是，我有一个幻灯片脚本，我希望它能够在下一张幻灯片激活/可见时运行一个函数。该函数所做的是检查任何具有css类型（在数组中设置的类型）的ID，然后向其添加一个类。我这样做的原因是因为它需要扩展，根据类型做不同的事情

我有一些通用代码，但我真的不知道我在做什么。以下是我迄今为止所做的：

职能：

function doAnimate(index) {
      var item = $animations[index];

      for (var i = 0; i < item.length; i++) {
        var obj = item[i];
        if (obj['type'] = "css") {$(this).addClass('in');}
      };
    }

这是幻灯片放映脚本及其运行位置：

carousel.owlCarousel({
          ... cut stuff out that isn't important
          pagination:true,
          afterMove: function(elem) {
            doAnimate();
          }
        });

下面是如何在HTML中设置这个特定的

        <div class="slide" id="slide-05">
          <img id="s5-01" src="img1.png" />
          <img id="s5-02" src="img2.png" />
          <img id="s5-03" src="img3.png" />
          <img id="s5-04" src="img4.png" />
          <img id="s5-05" src="img5.png" />
        </div>

我就是这样，浏览器控制台说：uncaughttypeerror:cannotreadproperty'length'是未定义的

我基本上有点迷路了，需要一些帮助来让它工作。我肯定这是一些基本的东西，我只是看不到，或者我可能把它设置错了

任何建议都将不胜感激

我认为应该是$（'.animations:eq（index）'），而不是$animations[index] 因为$animations不是有效的选择器。

---

查看此项了解更多信息

要使其正常工作，您需要解决一些问题

JavaScript数组

// Array
var $animations = [
  [{
    'id': "s5-01",
    'type': "css"
  }],
  [{
    'id': "s5-02",
    'type': "css"
  }],
  [{
    'id': "s5-03",
    'type': "css"
  }],
  [{
    'id': "s5-04",
    'type': "css"
  }],
  [{
    'id': "s5-05",
    'type': "css"
  }]
];

那么你的功能是：

function doAnimate(index) {
      var item = $animations[index];

      for (var i = 0; i < item.length; i++) {
        var obj = item[i];
        if (obj['type'] = "css") {$(this).addClass('in');}
      };
    }

JavaScript函数

// Animate function
function doAnimate(index) {
   // Check array
   for (var i = 0, len = $animations.length; i < len; i++) {
       // If Array ID & Type match element ID
       if( $animations[i][0].id == index && 
           $animations[i][0].type == 'css' ) {
           // Add class
           $('img#'+index).addClass('in');
       }
    }
}

//设置函数动画
函数doAnimate（索引）{
//校验数组
对于（变量i=0，len=$animations.length；i

---

要使其起作用，您必须将元素ID传递到

doAnimate（）

，请检查我的JSFIDLE示例：

使用

$的另一个解决方案。each（）

（）。我还简化了您的数组，以便执行以下操作：

$animations[01]。id

和get

s5-02

，而不是

$animations[1][0]。id

以获得相同的值

数组：

var $animations = [
    {
        'id': "s5-01",
        'type': "yyy"
    },
    {
        'id': "s5-02",
        'type': "css"
    },
    {
        'id': "s5-03",
        'type': "css"
    },
    {
        'id': "s5-04",
        'type': "css"
    },
    {
        'id': "s5-05",
        'type': "css"
    }    
]

同样的HTML内容。下面是JavaScript：

function doAnimate(index) {
    var item = $animations[index];
    $.each($animations, function(idx, val) {

        // console.log(val); //logs the value of val to console at index `idx`

        //check the `id` val at index idx if equal to the passed item.id
        if (val.id === item.id && val.type === 'css') {            
            $("#"+item.id).addClass('in');
            return false;
        }

        //and just to test if not equal to `css`
        if (val.id === item.id && val.type !== 'css') {
            $("#"+item.id).addClass('yy');
            return false;
        }
    });
}

---

此处演示小提琴：

您需要更改此行：

if (obj['type'] = "css") {$(this).addClass('in');}

这有两个问题。第一个是您的

if

条件使用

=

（赋值）而不是

=

或

==

（比较）。第二个问题是，您正在使用

this

，但是

this

所指的并不是您想要的元素；相反，您希望根据

obj

的

id

属性进行选择，因此：

if (obj['type'] === "css") {$('#' + obj.id).addClass('in');}

然后在本节代码中：

carousel.owlCarousel({
    // cut stuff out that isn't important
    pagination:true,
    afterMove: function(elem) {
        doAnimate();
    }
});

---

需要更改对

doAnimate（）

的调用，以传递

$animations

数组中某个元素的索引。

“要想实现这一点，必须将元素ID传递给doAnimate（）”当然不，这完全是荒谬的。@AnthonyGrist我想你没有理解我的意思，如果他在评估每个“活动/可见”图像，他必须传递该图像的ID/类，以便检查其属性并将其与数组中的值匹配；）。不过，我在我的答案中找不到任何“完全荒谬”的东西，不过欢迎你证明我错了。你能举一个例子，说明你最后的评论是如何通过$animations数组元素的索引的吗？