javascript - jQuery 一个带有 url 的元素

Question

我有 3 个带有 data-image="1" data-image="2" data-image="3" 的 div .

我有变量$img_nubmer。

我需要使用 data-image = $img_nubmer 从元素中获取 div 的背景图像 url。

类似$url = $("'.img[data-image="+$img_number+"']").css("background-image")

请问我该怎么做？

Answer 1

我会试试

$img_number = 5;  // just an example
$url = $("img[data-image='"+$img_number+"']").css("background-image");  // grab the background property

所以对于一个完整的例子:

window.getURL = function() {
  $img_number = $('[type="number"]').val();
  $url = $("[data-image='" + $img_number + "']").css("background-image");
  $url = $url.replace('url(', '').replace(')', ''); // lose the extra details
  alert($url);
}

div.image {
  background-image: url('http://graph.facebook.com/205500370/picture?type=large');
  height: 150px;
  width: 150px;
}

div {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image" data-image="5"></div>
<div>
  <input type="number" value="5" />
  <br>
  <button onclick="getURL()">Get Image URL</button>
</div>