Менять изображения HTML с jQuery

Мне нужно, чтобы, загрузив страницу, он сменил изображения HTML на изображения очевидного array.

Код Javascript:

var productos = new Array(
    "img/minis/afrodita.png",
    "img/minis/arpia.jpg",
    "img/minis/basilisco.jpg",
    "img/minis/caballo.jpg",
    "img/minis/centauro.jpg",
    "img/minis/fenix.jpg",
    "img/minis/gea.jpg",
    "img/minis/grifo.png",
    "img/minis/hidra.gif",
    "img/minis/kraken.jpg",
    "img/minis/medusa.png",
    "img/minis/minotauro.jpg",
    "img/minis/pegaso.jpg",
    "img/minis/poseidon.jpg",
    "img/minis/quimera.jpg",
    "img/minis/satiro.jpg",
    "img/minis/unicornio.jpg"
);
window.onload=function(){
    //Cargar las imágenes en las divisiones
    $.each(productos,function(i,elemento){
        console.log("elemento", elemento);
        //$("#foo0").append("<img src="+ elemento+">" );
        $(".Brand").children().replaceWith("<img src="+ elemento+">" );
        //var htmlString =  $(this).html();

        $(".Brand").width(60).height(25);
        console.log("elemento", elemento);
    });
    //Crear un efecto hover
    $(".Brand").hover(function(){
        $(this).css("opacity", 0.5);
    },
    function(){
        $(this).css("opacity", 1);
    });
    //Cambiar la imagen en el banner
    $(".Brand").on('click', function(){
        t = $(this).find("img").attr("src");
        t = t.replace("img/minis/","");
        p = t.indexOf(".");
        t = t.substring(0,p);
        t = "img/banner/"+t+".jpg";

        console.log("T", t);
        //Desvanece la foto del banner y manda a cambiaFoto
    });
}

Код HTML:

<ul id="foo0">
    <li><div class="Brand"><img src="img/brand01.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand02.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand03.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand04.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand05.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand06.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand07.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand08.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand09.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand10.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand11.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand12.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand13.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand14.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand15.png" width="60" height="60" alt="Brand" /></div></li>
    <li><div class="Brand"><img src="img/brand16.png" width="60" height="60" alt="Brand" /></div></li>
</ul>
1
задан 15.01.2017, 02:51
0 ответов

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

$('.Brand img').each(function(i) {
  var image = productos[i];
  if (image) {
    $(this).attr('src', );
  } else {
    $(this).attr('src', 'img/default.png');
  }
});

Также, как уже они рекомендовали тебя, - полностью ненужно делать эффект в hover используя язык сценариев JavaScript, когда ты можешь делать это CSS. Включенный Ésto мог бы затрагивать результат.

Ésto:

$(".Brand").hover(function(){
  $(this).css("opacity", 0.5);
}, function(){
  $(this).css("opacity", 1);
}

Ты можешь заменять это легко с:

.Brand:hover { opacity: .5; }

PD: не используй window#onload, твой код будет работать только, когда весь документ был загружен, включая scripts, изображения и iframes, которым, если у твоего интернет-сайта есть высокая скрытость, изображения будут медлить с тем, чтобы быть видны, и ты получишь наказание в результате и UX. В Вашем месте, используй document#ready the jQuery.

2
ответ дан 03.12.2019, 17:40

Ты можешь организовывать код лучшего способа. Если этот array изображений статический, я не вижу разум, из-за которого делать это посредством Javascript, просто было бы достаточно загружать изображения в Ваших корреспондентах src в коде html.

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

Если ты используешь jquery, используй $(document).ready() вместо window.onload чтобы упрощать немного вещи.

Однако, предполагая, что array изображений, которые ты используешь, - динамический, и что каким-то образом src эти изображения измени; моя подсказка структурообразования кода была бы следующей:

$(document).ready(onLoad);

function onLoad() {
  // Cargar las imágenes al cargar la página:
  loadImages();

  $('ul#images').on('click', 'li.brand', function() {
    var basename = $(this).find('img').attr('base-name');
    var banner = 'img/banner/' + basename + '.jpg'; // Suponiendo que todas son .jpg
    console.log(banner);
  });

  // Aca iría cualquier otra cosa que quieras
  // hacer cuando la página cargue...
}

function loadImages() {
  getImages().then(function(source) {
    source.images.map(function(image) {
      var parts = image.split('.');
      return {
        base: source.baseUrl,
        name: parts[0],
        ext: parts[1]
      };
    }).forEach(function(src) {
      var li = $('<li>', { class: 'brand' });
      li.append(createImageFromSrc(src));
      $('ul#images').append(li);
    });
  });
}

function createImageFromSrc(source) {
  return $('<img>', {
    'src': source.base + source.name + source.ext,
    'base-name': source.name,
    'alt': 'brand'
  });
}

// Obtener las imagenes de alguna forma asíncrona:
function getImages() {
  return new Promise(function(done) {
    // Aqui deberías hacer la típica llamada ajax a alguna API de imágenes
    // El siguiente código es simplemente para cuestiones prácticas...
    var source = {
      baseUrl: '/img/minis/',
      images: [
        'afrodita.png',
        'arpia.jpg',
        'basilisco.jpg',
        'caballo.jpg',
        'centauro.jpg',
        'fenix.jpg',
        'gea.jpg',
        'grifo.png',
        'hidra.gif',
        'kraken.jpg',
        'medusa.png',
        'minotauro.jpg',
        'pegaso.jpg',
        'poseidon.jpg',
        'quimera.jpg',
        'satiro.jpg',
        'unicornio.jpg'
      ]
    };

    done(source);
  });
}
ul.images li.brand:hover {
  opacity: 0.5;
}
<ul id="images" class="images"></ul>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
2
ответ дан 03.12.2019, 17:40
  • 1
    " предполагая, что array imá гены, которые ты используешь, он diná обезьяна, и который каким-то образом src этих imá гены cambia". Твой mé совсем getImages только возвращает обещание с теми же imá гены всегда, allí нет динамизма абсолютно, чистая asincroní в, что не является тем же самым. Немного действительно diná обезьяна serí чтобы получать imá гены API, которые всегда cambiará n (как например Pinterest). –  15.01.2017, 14:32
  • 2
    Это очевидное, только это способ подтверждать примерами, что внутри обещания escribirí в có говорит соответствующий в obtenció n imá гены способа así ncrona, tí picamente вызов ajax и потом решать обещание однажды imá гены явились доступными. –  15.01.2017, 18:41

Я использовал бы что-либо подобное...

var divs = document.getElementsByClassName('Brand');

for(var i = 0; i < divs.length; i++){
    var img = divs[i].firstChild.src = productos[i];
}

https://jsfiddle.net / dotspencer / kee7t2hL /

1
ответ дан 03.12.2019, 17:40
  • 1
    спасибо за твой комментарий, я думаю, что мне не хватаю, объяснять, что то, что я делаю, печатает меня всегда, я сделал образ приоритетным или последняя число статьи, напечатанный - правильное. больше не образ < br> img1 < br> img1 < br> img1 < br> img1, но в консоли, если он появляется имена правильных архивов. –  24.02.2017, 20:49

Теги

Похожие вопросы