Нужна помощь jQuery при добавлении класса в массив объектов

0

Мои навыки jquery не превосходны. То, что я обычно делаю, это принимать плагины, а затем выяснить, что мне нужно делать.

То, что я делаю прямо сейчас, это то, что у меня есть сценарий слайд-шоу, и я хочу, чтобы при следующем запуске слайда/активности, функция запускается. Эта функция выполняет проверку для любого идентификатора, который имеет тип 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');}
      };
    }

Массив:

  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' undefined

В основном я теряюсь и нуждаюсь в некоторой помощи, чтобы заставить это работать. Я уверен, что это что-то основное, что я просто не вижу, или, может быть, я все это неправильно настроил.

Любой совет будет очень благодарен!

Теги:
arrays
function

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/

Поделиться
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.

Поделиться
  • 0
    Можете ли вы показать пример для вашего последнего комментария для передачи индекса для элемента массива $ animations?
0

Я считаю, что это должно быть $ ('. Animations: eq (index)') not $ animations [index] Так как $ animations не является допустимым селектором. Проверьте это http://api.jquery.com/eq-selector/ для получения дополнительной информации.

Поделиться
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() идентификатору элемента, проверить пример jsFiddle: http://jsfiddle.net/sfhbX/

Поделиться
  • 0
    «Чтобы это работало, вы должны передать в doAnimate () идентификатор элемента». Конечно, нет, это совершенно абсурдно.
  • 0
    @AnthonyGrist Я думаю, вы не понимаете, что я имею в виду, если он оценивает каждое «активное / видимое» изображение, он должен передать идентификатор / класс этого изображения, чтобы он мог проверить его свойства и сопоставить его со значениями в массиве;). Я не могу найти ничего «абсолютно абсурдного» в своем ответе, однако вы можете доказать, что я не прав.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню