如何在项目符号列表中插入背景(图片）元素，其 URL 写入相邻的项目符号列表中

How to insert background (picture) elements in a bulleted list, a url to which is written in the neighboring bulleted list

本文关键字：符号 项目 列表 URL 图片 插入 背景 元素      更新时间：2023-09-26

有两个项目符号列表。data-img元素中的一个属性拼写了li li 的图片，这些图片应该在第二个项目符号的背景元素中。我在这里写了这样的代码，认为他跑对了，但似乎每次传递他都会转向第一个元素for 

$(".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>

我知道即使CC_5是，但它是如何通过的我无法理解......

试试这个 jsfiddle ：

$(".views").each(function() {
    var bg = $(this).attr("data-img");
    var self   = $(this),
    index  = self.index();
    $("ol.buttons li a:eq("+index+")").css(
    "background","url(" + bg + ")"
    )
})
相关文章：