0

Есть два маркированных списка. У одного в атрибутах data-imgэлементов li прописаны urlы картинок, которые должны стать фоном у элементов второго маркированного списка. написал вот такой код, думал что он перебегает корректно, но похоже при каждом проходе он обращается к первому элементу li

$(".views").each(function() {
  var bg = $(this).attr("data-img");
  //alert(bg);

  $("ol.buttons li a").css({
    background: "url(" + bg + ")"
  })
})
.views {
  display: inline-block;
  position: relative;
  width: 30%;
  height: 50px;
  margin: 2px;
  background: #ccc;
}
li {
  list-style-type: none;
  /* Убираем маркеры */
}
li.but {
  display: inline-block;
  position: relative;
  margin: 5px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid red;
  text-align: center;
}
ol.buttons {
  text-align: center;
}
a {
  background-size: cover!important;
  width: 100%;
  height: 100%;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<ul class="parent-view">
  <li class="views" data-img="http://goodimg.ru/img/tsvetochek-risunok3.jpg"></li>
  <li class="views" data-img="http://agu-shop.ru/images/pink_flower_512x512.png"></li>
  <li class="views" data-img="http://www.raskraska.ru/counting/flower-bw.gif"></li>
</ul>
<ol class="buttons">
  <li class="but"><a>1</a>
  </li>
  <li class="but"><a>2</a>
  </li>
  <li class="but"><a>3</a>
  </li>
</ol>

знаю, что еще и for есть, но как все это перебрать не могу понять...

1 ответ 1

3

Так как индексы совпадают, а вставляете в фон в ссылки, то и бежать можно ао ссылкам используя функцию css

$("ol.buttons li a").css('background', function(index) {
  return 'url(' + $(".views:eq(" + index + ")").data('img') + ')';
});

В функции которая вызывается для конкретной ссылки и должна вернуть значение свойства просто выбирается соответствующий элемент с классом .views и берется его нужное значение.

Пример:

$("ol.buttons li a").css('background', function(index) {
  return 'url(' + $(".views:eq(" + index + ")").data('img') + ')';
});
.views {
  display: inline-block;
  position: relative;
  width: 30%;
  height: 50px;
  margin: 2px;
  background: #ccc;
}
li {
  list-style-type: none;
  /* Убираем маркеры */
}
li.but {
  display: inline-block;
  position: relative;
  margin: 5px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid red;
  text-align: center;
}
ol.buttons {
  text-align: center;
}
a {
  background-size: cover!important;
  width: 100%;
  height: 100%;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<ul class="parent-view">
  <li class="views" data-img="http://goodimg.ru/img/tsvetochek-risunok3.jpg"></li>
  <li class="views" data-img="http://agu-shop.ru/images/pink_flower_512x512.png"></li>
  <li class="views" data-img="http://www.raskraska.ru/counting/flower-bw.gif"></li>
</ul>
<ol class="buttons">
  <li class="but"><a>1</a>
  </li>
  <li class="but"><a>2</a>
  </li>
  <li class="but"><a>3</a>
  </li>
</ol>

2
  • $(".views:eq(" + index + ")").data('img') - вот этот момент только человеческим языком прочитать не получается а так все работает, благодарю!)
    – engenes
    Commented 22 февр. 2016 в 11:31
  • 1
    @ЕвгенийШевцов, здесь собирается строка формата: $(".views:eq(0)").data('img'), $(".views:eq(1)").data('img'), $(".views:eq(2)").data('img') и т.д. просто вместо цифры текущий индекс элемента подставляется
    – Grundy
    Commented 22 февр. 2016 в 11:54

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.