jQuery attr（“ src”）返回未定義

Question

我正在嘗試使用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> 

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

好吧，您在未讀的錨點上有一個屬性。 將其更改為數據屬性，並使用變量而不是對字符串進行硬編碼。

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

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"標簽。 如果您將class 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>