Изменение источника изображения на источник изображения на другой странице - PullRequest
Новая
       42

Изменение источника изображения на источник изображения на другой странице

0 голосов
/ 05 июня 2019

Я хочу обновить источник изображения до источника другого изображения на другой странице.

Я создаю магазин площади для мебели.Мебель имеет несколько сезонных вариантов материала, которые выбираются каждые 6 месяцев.Я хочу, чтобы компания, в которой я работаю, легко обновляла коллекцию материалов для всех имеющихся продуктов, не меняя ее отдельно для каждого продукта.Поэтому моя идея состояла в том, чтобы сначала добавить изображения-заполнители для каждого продукта, а затем создать отдельную страницу с описанием материала.Если изображение на странице материала изменяется, обновляются и все изображения заполнителя.

Я ожидал бы, что это сработает, но вместо этого я получаю сообщение об ошибке:

stoff2: 740 Uncaught SyntaxError: неверный или неожиданный токен

Thisошибка указывает на строку $('img[alt.... 

$(document).ready(function() {
  var count;
  var newSrc;
  for (count = 1; count < 5; count++) {
    var adress = "http://uk5-shop.com/stoff" + count;
    $.get(adress, function(data) {
      newSrc = document.getElementById("5cf7ba50095f4e0001e1519c").src;
    });
    $(‘img[alt = ”stoff” + count]’).src = newSrc;
  };
});

1 Ответ

0 голосов
/ 05 июня 2019

Во-первых, ошибка в том, что ‘ не является допустимым символом в JS.То же самое для ” и ’.Вам необходимо использовать ' и " соответственно.

Однако есть несколько других проблем с вашей логикой.

Во-первых, вы используете document.getElementById() после AJAX-запроса для доступа к ответу, но это только доступ к текущей странице.Чтобы исправить это, используйте аргумент data, предоставленный функции, чтобы получить HTML-код ответа и найти там необходимый атрибут src.

Во-вторых, вам нужно обновить src в обратном вызове AJAX $.get(), а не вне его, а также объекты jQuery не имеют свойства src.Вам нужно использовать prop() или attr().

Далее сами кавычки в селекторе [alt=...], даже если они исправлены, не соответствуют друг другу.Вы закрываете кавычки значения атрибута слишком рано и пропускаете + для конкатенации конца строки после count.

Наконец, чтобы избежать проблем с тем, что значение count не является значением, которое вы ожидаете, когда возвращается запрос AJAX (из-за завершения цикла), вам нужно либо использовать замыкание, либо просто letКлючевое слово, предполагающее, что браузеры, на которые вы ориентируетесь, поддерживают его.

С учетом всего сказанного попробуйте следующее: 

$(document).ready(function() {
  for (let count = 1; count < 5; count++) {
    var address = "http://uk5-shop.com/stoff" + count;
    $.get(address, function(data) {
      var newSrc = $(data).find("#5cf7ba50095f4e0001e1519c").prop('src');
      $('img[alt="stoff' + count + '"]').prop('src', newSrc);
    });
  };
});

В качестве отступления, я бы предположил, что использование AJAX для этого немногорасточительным.Для каждой загруженной страницы вы вызываете дополнительные 5-страничные запросы к вашему серверу, чтобы узнать местоположение некоторых изображений.Если возможно, я бы посоветовал вам изменить эту логику, чтобы получить эти местоположения на стороне сервера, чтобы избежать ненужной нагрузки на ваш сервер.

...