需要 jQuery 帮助将类添加到对象数组

Question

我的 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');}
      };
    }

数组：

  var $animations = [
      [{
        ID: "s5-01",
        type: "css"
      }],
      [{
        ID: "s5-02",
        type: "css"
      }],
      [{
        ID: "s5-03",
        type: "css"
      }],
      [{
        ID: "s5-04",
        type: "css"
      }],
      [{
        ID: "#5-05",
        type: "css"
      }]
    ];

这是幻灯片脚本，它应该在哪里运行：

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>

所以我就是这样，浏览器控制台显示：Uncaught TypeError: Cannot read property 'length' of undefined

我基本上有点迷茫，需要一些帮助才能完成这项工作。我确定这是一些我看不到的基本内容，或者我设置的全部错误。

任何建议将不胜感激！

Answer 1

我认为应该是 $('.animations:eq(index)') 而不是 $animations[index] 因为 $animations 不是一个有效的选择器。 查看此http://api.jquery.com/eq-selector/ 了解更多信息

Answer 2

您需要解决一些问题才能使其正常工作。

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"
  }]
];

那么你的功能：

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

为此，您必须将元素 ID 传递给 doAnimate()，查看我的 jsFiddle 示例：http://jsfiddle.net/sfhbX/

Answer 3

使用$.each()(http://api.jquery.com/jQuery.each/) 的另一种解决方案。我还简化了您的数组，以便我可以这样做：$animations[01].id 并获取 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;
        }
    });
}

在这里演示小提琴：http://jsfiddle.net/KpmNL/

Answer 4

你需要改变这一行：

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 数组中元素的索引。