0

我的 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

我基本上有点迷路，需要一些帮助才能使其正常工作。我敢肯定这是我看不到的基本东西，或者我把它设置错了。

任何建议将不胜感激！

4

4 回答 4

0

另一个使用$.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/

于 2013-10-25T10:05:33.840 回答
0

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

于 2013-10-25T05:28:34.950 回答
0

您需要更改此行：

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

这样做有两个问题。首先是您的if条件使用=（分配）而不是==或===（比较）。第二个是您正在使用this，但this所指的不是您想要的元素；相反，您想根据 的id属性进行选择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()需要更改该调用以传递$animations数组中元素的索引。

于 2013-10-25T10:10:59.797 回答
0

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

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/

于 2013-10-25T06:17:41.743 回答