>我正在尝试使用jQuery获取图像的来源。但是,当我记录结果时,它返回未定义。这是我的代码:
$(document).ready(function() {
$(".btn-expand").on("click", function() {
var img = $(".img-" + "num" + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
<a href="" class="btn-expand" overlay-data="2">View</a>
</div>
</div>
</div>
</div>
$(".img-" + "num" + " img")
完全等同于
$(".img-num img")
我相信你的意思是"num"
是一个叫做num
的变量,其值是目标图像的编号,而不是硬编码的字符串:
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
<a href="#" class="btn-expand" overlay-data="2">View</a>
</div>
</div>
</div>
</div>
好吧,您在锚点上有一个您不阅读的属性。将其更改为数据属性并使用变量而不是硬编码字符串。
$(document).ready(function() {
$(".btn-expand").on("click", function (e) {
e.preventDefault()
var overlay = $(this).data("overlay")
var img = $(".img-" + overlay + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="http://via.placeholder.com/350x150" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
<a href="#" class="btn-expand" data-overlay="2">View</a>
</div>
</div>
</div>
</div>
除了未定义属性值之外,一切看起来都不错。要在 jQuery 中设置属性,必须设置该值。因此,更正该片段。
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
<a href="#" class="btn-expand" overlay-data="2">View</a>
</div>
</div>
</div>
</div>
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src","imageSource.extention");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
<a href="#" class="btn-expand" overlay-data="2">View</a>
</div>
</div>
</div>
</div>
var img = $(".img-" + "num" + " img").attr("src");
在此代码中,您要查找具有类 "im-num"
的标记和具有类 "img"
的子项。 如果您将类im-num
提供给外部div
和类img
<div class="col-md-12 img-banner img-2 im-num">
<img src="assets/img/placeholder-banner.png" alt="Banner 2" class='img'/>
</div>