Question

我正在尝试使用jQuery获取图像的来源。但是，当我记录结果时，它返回undefined。这是我的代码：

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

Answer 1

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

Answer 2

你有一个你没看过的锚的属性。将其更改为数据属性并使用变量而不是对字符串进行硬编码。

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

Answer 3

除了没有定义属性值外，一切看起来都很好。要在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>

Answer 4

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>

jQuery attr（“src”）返回undefined

4 个答案: