使用jQuery为URL链接添加元素

Question

我有三个div，分别是data-image="1"、data-image="2"和data-image="3"。

此外，我还有一个变量$img_nubmer。

我需要从具有data-image = $img_nubmer的元素中获取div的背景图片url。

可以使用类似以下代码：$url = $("'.img[data-image="+$img_number+"']").css("background-image") 请问如何实现？

- supermishboy

---

var url = $("img[data-image="+$img_number+"]").prop('src') зҡ„дёӯж–Үзҝ»иҜ‘жҳҜпјҡиҺ·еҸ–еұһжҖ§ data-image еҖјдёә $img_number зҡ„еӣҫзүҮе…ғзҙ зҡ„ src еұһжҖ§еҖјпјҢ并е°Ҷе…¶иөӢеҖјз»ҷеҸҳйҮҸ urlгҖӮ - adeneo

如果 (e.keyCode == 39) { $img_number = 1; $background_next = $(".img[data-image="+$img_number+"]").css("background-image"); alert($background_next); } 但它返回未定义 - supermishboy

你需要去掉在 .img 前面的点号，因为你寻找的不是类，而是 <img /> 元素。 - blex

这是一个例子，我有一个名为img的类，所以我认为需要那个点。 - supermishboy

在这种情况下，调试时请尝试使用console.log而不是alert。当执行console.log($("img[data-image="+$img_number+"]"));时，控制台会输出什么？ - blex

$url = $(".img[data-image='"+$img_number+"']").css("background-image") - Vasiliy vvscode Vanchuk

Answer 1

您可以将变量添加到您的选择器中，如下所示：

var img_number = 1;
$('img[data-image="'+img_number+'"]');

查看Codepen示例

- Mike Hamilton

Answer 2

我会尝试

$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>

- omikes

---

非常感谢，这正是我所需要的 :) - supermishboy