Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Victoros6666
0 / 0 / 1
Регистрация: 28.06.2016
Сообщений: 104
1

Изменить название атрибута

10.02.2018, 20:34. Просмотров 186. Ответов 2
Метки нет (Все метки)

Ребят собственно вопрос есть группа таких элементов на странице. Есть атрибут data-src у элемента img.
хочу сделать что бы при клике на "кнопку" Show Images появлялись картинки, что то подобное аля ленивой загрузки.
но почему то мой жс код меняет не название атрибута, а его значении, подскажите что делают не так...

HTML5
1
2
3
4
5
6
7
8
9
<div class="conteiner_imgs">
    <button type="button" class="btn btn-primary btn-xs">Images Del</button>
    <div class="showimges">Show Images</div>
    <div class="row">
        <a href="/1/sh/img/02.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-1-5"><img data-src="/1/sh/img/02.jpg" class="img-fluid" ></a>
        <a href="/1/sh/img/03.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-1-5"><img data-src="/1/sh/img/03.jpg" class="img-fluid" ></a>
        <a href="/1/sh/img/04.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-1-5"><img data-src="/1/sh/img/04.jpg" class="img-fluid" ></a>
       </div>
</div>
Javascript
1
2
3
4
5
6
 $(".conteiner_imgs .showimges").click(function() {
  var a_elems = $(this).parent().find('img');
  var array = [];
  for(var index = 0; index < a_elems.length; index++){
    var s_elem = a_elems[index].setAttribute('data-src', 'src')
  }
Добавлено через 43 минуты
на гуглил такой скриптик и все заработало как надо. но не понял почему мой код не менял название атрибута, может кто то обьяснит на будщие что в моем варианте было не так
Javascript
1
2
3
4
5
6
7
8
9
 $(".conteiner_imgs .showimges").click(function() {
  var imgEl = $(this).parent().find('img');
  for (var i=0; i<imgEl.length; i++) {
    if(imgEl[i].getAttribute('data-src')) {
       imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
       imgEl[i].removeAttribute('data-src');
    }
}
});
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.02.2018, 20:34
Ответы с готовыми решениями:

Изменить название кнопки при нажатии
Привет всем, настигла проблема, как изменить название кнопки при нажатии?...

Как изменить название динамически добавляемого input?
На странице можно создать при помощи jQuery 2 типа полей с названиями checkbox...

Изменить название кнопки
Здравствуйте, подскажите как реализовать Есть текстовое поле и рядом кнопка,...

Получение атрибута
Как достать атрибут data-big &lt;img data-big=&quot;test/белая/wait1.jpg&quot;...

Запись атрибута value
Появилась такая проблема: не могу записать значение атрибута value через JS....

2
Smls
80 / 80 / 57
Регистрация: 19.01.2015
Сообщений: 229
10.02.2018, 22:10 2
Цитата Сообщение от Victoros6666 Посмотреть сообщение
но не понял почему мой код не менял название атрибута
Потому что его никто и не просил менять.
Javascript
1
setAttribute('data-src', 'src')
Тут написано установить атрибут с именем 'data-src' и значением 'src'.

Зачем вообще нужно делать IMG без обязательного атрибута, а потом добавлять этот атрибут скриптом, если можно сделать нормальную картинку и просто менять свойство display.
HTML5
1
2
3
4
5
6
7
8
9
<div class="conteiner_imgs">
    <button type="button" class="btn btn-primary btn-xs">Images Del</button>
    <div class="showimges">Show Images</div>
    <div class="row">
        <a href="/1/sh/img/02.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-1-5"><img src="/1/sh/img/02.jpg" class="img-fluid" ></a>
        <a href="/1/sh/img/03.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-1-5"><img src="/1/sh/img/03.jpg" class="img-fluid" ></a>
        <a href="/1/sh/img/04.jpg" data-toggle="lightbox" data-gallery="example-gallery" class="col-lg-1-5"><img src="/1/sh/img/04.jpg" class="img-fluid" ></a>
       </div>
</div>
CSS
1
2
3
.img-fluid {
display: none; 
}
Javascript
1
2
3
$(".conteiner_imgs .showimges").click(function() {
$(".img-fluid").css("display", "block");
  });
1
Victoros6666
0 / 0 / 1
Регистрация: 28.06.2016
Сообщений: 104
10.02.2018, 22:25  [ТС] 3
в вашем варианте получается что картинки все ровно будет загружена на страницу, но не будет отображаться, а мне надо что бы именно не загружалась
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.02.2018, 22:25

js добавление атрибута
Доброго времени суток) Есть такой html код: &lt;div class=&quot;container-page&quot;&gt; ...

Удалить свойство атрибута
есть вот такой вот элемент &lt;div id=&quot;myDiv&quot; class=&quot;item zlegend myinline&quot;...

Игнорирование атрибута visibility
Доброго дня уважаемое сообщество. Возникла очень интересная проблема. Суть...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru