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：无法读取未定义的属性'length'

我基本上有点失落，需要一些帮助才能让这个工作。我确信这是我看不到的基本内容，或者说我把它设置错了。

非常感谢任何建议！

Answer 1

我认为它应该是$（＆＃39; .animations：eq（index）＆＃39;）而不是$ animations [index] 由于$动画不是有效的选择器。查看此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');
       }
    }
}

为了实现这一目标，您必须传递给doAnimate()元素 ID ，请查看我的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所指的不是您想要的元素;您想要根据id的{{1}}属性进行选择，所以：

obj

然后在这段代码中：

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

需要更改对carousel.owlCarousel({ // cut stuff out that isn't important pagination:true, afterMove: function(elem) { doAnimate(); } });的调用，以传递doAnimate()数组中元素的索引。

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

4 个答案: