jquery - 使用圖像的attr（）時未定義的src

只學習jQuery。我想要的是抓住圖像的src，並以固定的分區顯示它，就像彈出圖像的標題一樣。但我堅持要獲取圖像的src。jquery - 使用圖像的attr（）時未定義的src

當我嘗試使用.attr（）時，它給了我undefined。

HTML：

  <div id="album"> 

       <div class="pic"> 

       </div> 

       <div class="screen"> 
        <h1 class="title">Photo 1</h1> 
        <img src="images/1 png.png" class="image" /> 
        <p class="description">This is a description</p> 
       </div> 

       <div class="screen"> 
        <h1 class="title">Photo 1</h1> 
        <img src="images/1 png.png" class="image" /> 
        <p class="description">This is a description</p> 
       </div> 
       <span class="clear_left"></span> 

      </div>

CSS：

.screen { 
    border: 1px solid green; 
    margin: 10px auto; 
    float: left; 
    cursor:pointer 
} 

.image { 
    width: 300px; 

} 

.title { 
    font-size: 30px; 
} 

.description { 
    font-size: 25px; 
} 

.pic { 
    width: 600px; 
    position:fixed; 
}

JS：

$(document).ready(function() { 
    $(".pic").hide(); 
    $(".screen").click(function() { 
     display(); 
    }); 
}); 

function display() { 
    var source = $("img",this).attr("src"); 
    alert("The souce of the image is " + source); 
}

來源

2013-10-23 Robin

的問題是，該方法display()不具有元素的上下文被點擊。因此，它是顯示undefined

所以，試試這個：

$(document).ready(function() { 
    $(".pic").hide(); 
    $(".screen").click(function() { 
     display($(this)); 
    }); 
}); 

function display($this) { 
    var source = $("img", $this).attr("src"); 
    alert("The souce of the image is " + source); 
}

Working demo

來源

2013-10-23 20:22:24 karthikr

感謝它的工作！如何傳遞此src並將其顯示在div（.pic）中？我添加了'$（'。pic'）。show（）;'，但我不知道如何通過src在.pic div中顯示圖像及其描述。 – Robin

這很簡單：這篇文章應該可以幫助你：http：//stackoverflow.com/questions/8013792/how-to-create-a-new-img-tag-with-jquery-with-the-src-and-id -from-a-javascript-o – karthikr

在display功能this指的是你的匿名函數，而不是元素。你不需要包裝它。 $('.screen').click(display)將確保this引用.screen元素。

我也會改變顯示要做到這一點，而不是：

function display() { 
    var source = $(this).find('img').attr('src'); 
    alert("The source of the image is " + source); 
}

這種包裝的jQuery被點擊，發現它裏面的img元素，該元素.screen左右。我認爲這有點更清楚，但這只是一個偏好。

來源

2013-10-23 20:23:23 earl3s

與''img「相同，這個' – tymeJV

不要換你的函數調用另一個匿名函數：

演示：http://jsfiddle.net/9KgSQ/

$(".screen").click(display);

這將沿着現在通過this給你的函數。

來源

2013-10-23 20:24:35 tymeJV

這是因爲display中的this的值與.screen的點擊函數中的值this不相同。您可以通過在display函數中調用console.log(this);來做一個測試，看看this的值是多少。

如果你想傳遞給display的this值可以使用call功能，像這樣：

$(document).ready(function() { 
    $(".pic").hide(); 
    $(".screen").click(function() { 
     display.call(this); 
    }); 
}); 

function display() { 
    var source = $("img", this).attr("src"); 
    alert("The souce of the image is " + source); 
}

或者你可以徹底擺脫匿名函數和display直接傳遞：

$(".screen").click(display);

來源

2013-10-23 20:28:10

這是因爲你的src是未定義的。

function display() { 
    var source = $("img",this).attr("src", "images/okay.jpg"); 
    alert("The souce of the image is " + source); 
}

來源

2015-07-27 19:25:02 slickrick

jquery - 使用圖像的attr（）時未定義的src

回答

相關問題