Как заменить участок кода Html на другой с помощью Jquery?

Question

[Михаил Гильмутдинов]

<div id="camera" class="camera_wrap">
                
				<div data-src="images/slide1.jpg">

                </div>
                <div data-src="images/slide2.jpg">

                </div>
                <div data-src="images/slide3.jpg">

                </div>

Нужно к примеру images/slide1.jpg заменить images/slide1_small.jpg

Answer 1

[holfza]

https://jsfiddle.net/vjLL124o/1/

Comments

[Михаил Гильмутдинов]

))) Простите но...
забыл упомянуть что менять надо для window<450px
Не могли бы вы подсказать как построить конструкция скрипта?

[holfza]

https://jsfiddle.net/vjLL124o/3/

[holfza]

Михаил Гильмутдинов: С такими задачами надо либо самому учиться разбираться (а если что-то не получается, то сюда обращаться), либо на фриланс.

[Михаил Гильмутдинов]

holfza: if ($(window).width() > 980) {
{$('#camera > div').each(function(){
$(this).data('src', 'images/'+$(this).data('src').split('/')[1].split('.')[0] + '_small.jpg');
console.log($(this).data('src'));
});}
}

[Михаил Гильмутдинов]

пр@holfza: правильно я понял?

[Михаил Гильмутдинов]

holfza: не работает(((

[holfza]

if ($(window).width() > 980) {
$('#camera > div').each(function(){
$(this).data('src', 'images/'+$(this).data('src').split('/')[1].split('.')[0] + '_small.jpg');
});
}

[Михаил Гильмутдинов]

holfza: не работает https://jsfiddle.net/vjLL124o/1/

[holfza]

Михаил Гильмутдинов: c2n.me/3psfT4S

[Михаил Гильмутдинов]

if ($(window).width() < 450) {
$('#camera > div').each(function(){
$(this).data('src', 'images/'+$(this).data('src').split('/')[1].split('.')[0] + '_small.jpg');
});
}
Никак не хочет меняться!(((

[Михаил Гильмутдинов]

holfza: Error while parsing the 'sandbox' attribute: 'allow-modals' is an invalid sandbox flag.

[holfza]

Михаил Гильмутдинов: Надо смотреть на пациента.

[Михаил Гильмутдинов]

holfza: https://jsfiddle.net/mixailhr/vjLL124o/5/

[holfza]

Михаил Гильмутдинов: Архив с версткой скинуть можете?

[Михаил Гильмутдинов]

holfza: нет извините! (

[holfza]

Михаил Гильмутдинов: Если в двух словах - пути к картинкам вам нужно менять не в исходном хтмл, а в том, который генерирует слайдер. Если на основе моего примеры вы не можете это сделать - то вам на фриланс.

[Михаил Гильмутдинов]

holfza: https://jsfiddle.net/mixailhr/vjLL124o/5/ здесь вот же файл который camera.js

[Михаил Гильмутдинов]

может здесь?

var allImg = new Array();
$('> div', elem).each( function() {
allImg.push($(this).attr('data-src'));
});

var allLinks = new Array();
$('> div', elem).each( function() {
if($(this).attr('data-link')){
allLinks.push($(this).attr('data-link'));
} else {
allLinks.push('');
}
});

[holfza]

Михаил Гильмутдинов: Замените у себя хтмл тот что в рамке, и весь js

[holfza]

holfza: https://jsfiddle.net/vjLL124o/7/

[holfza]

Михаил Гильмутдинов: clip2net.com/s/3psxbuw

[Михаил Гильмутдинов]

Как бы вы посоветовали спланировать обучение программированию? Есть какая-нибудь книжка чтобы хорошо разобраться в теме?

[Михаил Гильмутдинов]

holfza: Спасибо все заработало!

[Михаил Гильмутдинов]

Uncaught TypeError: Cannot read property 'setAttribute' of null$.fn.camera @ camera.js:870(anonymous function) @ camera.js:2276

Ругается!

[holfza]

Михаил Гильмутдинов: test.betfors.com/demo.zip- рабочий пример

[Михаил Гильмутдинов]

В этом примере вообще бесконечно копящаяся ошибка 10000 штук

[holfza]

Михаил Гильмутдинов: clip2net.com/s/3psH6lK - обновил

[Михаил Гильмутдинов]

)))) Круто. Спасибо! А как добавить свойство чтобы при изменении ширины экрана картинка менялась динамически а не только при обновлении? Ведь когда смотрят Горизонтально на айфоне к примеру разрешение больше!

Answer 2

[Илья Белобородов]

$('[data-src=images/slide1.jpg]').attr('data-src',' images/slide1_small.jpg')

как то так, писал по памяти

Comments

[Михаил Гильмутдинов]

забыл упомянуть что менять надо для window<450px
Не могли бы вы подсказать как построить конструкция скрипта?

[Otrivin]

Михаил Гильмутдинов: что понимаете под window? ширина окна?

[Михаил Гильмутдинов]

обращение к окну, width - ширина

Answer 3

[Otrivin]

$(document).ready(function(){
    	if ($(document).width() < 450){
        		$('#camera div:first').remove;
        		$('<div data-src="images/slide1_small.jpg"></div>').insertBefore('#camera div:first');
    	}
});

Кажется, как-то так. Проверяем ширину окна, ежели меньше 450 - удаляем первый дочерний div блока с id="Camera", затем добавляем html-код перед первым (оставшимся) дочерним блоком.

Можно довести до ума, реализовав именно замену, как у Илья Белобородов , но сам еще недостаточно разбираюсь.

Comments

[Михаил Гильмутдинов]

прикольно но этот скрипт не удаляет, а просто добавляет новый блок