Обмен изображениями в jQuery - PullRequest
Новая
       20

Обмен изображениями в jQuery

1 голос
/ 09 октября 2011

У меня есть 3 цветовых поля ... например.

  • Цвет
  • Готово
  • Основные

Теперь, когда пользователь нажимает кнопку «Цвет», изображение меняется в зависимости от цвета.Когда пользователь нажимает «Готово», окончание изменяется, и выбор цвета остается тем же, что он выбрал… и т. Д.

Я пытаюсь выполнить это в jQuery.Я подумываю о соглашении об именах с продуктами… что-то вроде «Product_Color_Finish_Highlights.jpg», тогда я бы изменил соответствующий «фрагмент» имени файла в сочетании с сделанным выбором.Затем отправьте новое имя файла как 'src' 'target_image'

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

Не думаю, что мне нужно сильно помогать с настоящим jQuery, а просто ... с чего начать?Как я могу атаковать это?

1 Ответ

0 голосов
/ 09 октября 2011

Начните с этого: 

$('#your-image-selector').attr('src', 'product_color_finish_or_whatever.jpg');

Или уточните немного, что вам нужно, и вы получите более конкретную помощь.

Вход в режим угадывания. Вы намекнули на что-то более условное. Предположим, у вас была следующая разметка, возможно, сгенерированная скриптом: 

<div id="pickers">
  <select id="color">
    <option value="blue">
  </select>
  <img id="color-swatch"/>

  <select id="finish">
    <option value="blue">
  </select>
  <img id="finish-swatch"/>

  <select id="highlights">
    <option value="blue">
  </select>
  <img id="highlights-swatch"/>

Вы можете использовать теги img src с помощью: 

$('#pickers > select').bind('load change', function(){
  $(this).next().attr('src', 'Product_' + $(this).val() + '.jpg');
});

Это не требует каких-либо определенных классов или идентификаторов для чего-либо - только то, что select s находится рядом с img s, и что имя файла img включает значение из средства выбора.

Что это? Вы не хотите, чтобы ваши изображения были рядом со сборщиками? Хорошо, тогда свяжите их вместе с условным обозначением идентификатора выбора whatever и идентификатором соответствующего изображения whatever--swatch. Тогда этот код будет работать: 

$('#pickers > select').bind('load change', function(){
  $('#' + $(this).attr('id') + '-swatch')
    .attr('src', 'Product_' + $(this).val() + '.jpg');
});

Это должно использовать это соглашение, чтобы найти изображение и обновить его src.

Ни один из этих примеров кода не был протестирован, но они должны вдохновлять на то, что работает.

...