Атрибут содержит селектор в массив - PullRequest
Новая
       3

Атрибут содержит селектор в массив

0 голосов
/ 23 декабря 2010

Я пытаюсь найти в SRC набор изображений, а затем вернуть все, что соответствует строке.Я основываюсь на системе электронной коммерции, которая очень ограничена, нет способа связать изображение с его вариантом, поэтому мне приходится искать в списке всех изображений, а затем возвращать соответствующие src.(Я также использую стойку с инструкциями IF, поэтому клиент может использовать WYSIWYG и добавлять новые цвета) 

   jQuery(document).ready(function($) {
       $('#product-variants-option-0').change(function() {
         var select_value, keyword, new_src;


         select_value = $(this).find(':selected').val();

        if (select_value == "Kelly Green") { keyword = "kelly"; };
        if (select_value == "Navy") { keyword = "navy"; };
        if (select_value == "Gunmetal Heather") { keyword = "gunmetal"; };
        if (select_value == "Olive") { keyword = "olive"; };
        if (select_value == "Cocoa") { keyword = "cocoa"; };
        if (select_value == "Black") { keyword = "black"; };
        if (select_value == "Charcoal") { keyword = "charcoal"; };
        if (select_value == "Dark Teal") { keyword = "teal"; };
        if (select_value == "White") { keyword = "white"; };
        if (select_value == "Black") { keyword = "black"; };
        if (select_value == "Garnet") { keyword = "garnet"; };
        if (select_value == "Charcoal Heather") { keyword = "charcoal-heather"; };


         // Find the image using that `src`, note that we concatenate the value
         // from `keyword`, rather than having it in a literal.
         var new_src = $('#preload img[src*=' + keyword + ']').attr('src');

         var large_src = new_src.replace('medium','large');

         // Set the image's source.
         $('div.image img').attr('src', large_src);
       });
    });

Это отлично работает для одного изображения.Но мне нужно 

var new_src = $('#preload img[src*=' + keyword + ']').attr('src');

как массив.затем передайте первый соответствующий SRC на 

$('div.image img').attr('src', large_src);

, затем все остальные на другой div 

$('div.thumbs img').attr('src', new_src);

Ответы [ 3 ]

2 голосов
/ 23 декабря 2010

В моем ответе на предыдущий вопрос я включил функцию attrAll, которая возвращает массив значений src. Тогда вам просто нужно внести в нее индекс.

Вот снова эта функция: 

// A utility function from my arsenal; you can
// just inline this if you don't want it.
// Returns an array containing the given attribute
// from *all* of the elements in the jQuery object.
// Args:
//  name        Name of the attribute to fetch
//  blanksOkay  (Optional, default false) true if
//              you want blanks in the array for
//              blank entries or non-existant entries;
//              false if you want them left out.
$.fn.attrAll = function(name, blanksOkay) {
  var list, index;

  if (typeof blanksOkay === "undefined") {
    blanksOkay = false;
  }

  list = [];
  for (index = 0; index < this.length; ++index) {
    entry = $(this[index]).attr(name);
    if (entry || blanksOkay) {
      list.push(entry);
    }
  }
  return list;
};

Использование: 

var srcArray = $('#preload img[src*=' + keyword + ']').attrAll('src');

Передача "... первого подходящего SRC": 

$('div.image img').attr('src', srcArray[0]);

Я не уверен, что вы подразумеваете под "... потом все остальное для другого div", но это массив, вы можете получить значения из него обычным способом и использовать их для добавления тегов img в div или что-то еще.

Возможно, вы имели в виду, что вы хотите, чтобы все остальные изображения были img тегами в div.thumbs. Если это так, другая функция общего назначения из , которая отвечает , может быть полезна: 

// Join the entries in the array with the given
// prefix and suffix.
function joinEntries(a, prefix, suffix) {
  prefix = prefix || '';
  suffix = suffix || '';
  return prefix + a.join(suffix + prefix) + suffix;
}

... потому что тогда вы можете сделать это: 

$('div.thumbs').html(joinEntries(srcArray.slice(1), "<img src='", "'>"));

... который заменяет большие пальцы тегами img для всех оставшихся записей в массиве.

0 голосов
/ 23 декабря 2010 
$('#preload img[src*=' + keyword + ']').each(function(){
    var large_src = $(this).attr('src').replace('medium','large');
    // Set the image's source.
    $(this).attr('src', large_src);
});
0 голосов
/ 23 декабря 2010 
$('#preload img[src*=' + keyword + ']').each( function(index) {
    if (index == 0) { $('div.image img').attr('src', $(this).attr('src') ) }
    if (index == 1) { $('div.thumbs img').attr('src', $(this).attr('src') ) }
} );

Непонятно, что вы хотите сделать с любым после первых двух ...

...