[英]How to get image src from specific element
我的示例html部分有幾個這樣的項目:
<ul class="catalog">
<li class="catalog_item catalog_item--default-view">
<div class="catalog_item_image">
<img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto">
</div>
<ul class="catalog_item_icons">
<li class="catalog_item_icons__preview"><img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"></li>
<li class="catalog_item_icons__preview"><img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"></li>
<li class="catalog_item_icons__preview"><img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"></li>
</ul>
我想用img.catalog_item_icons__preview--foto-small 的src 更改img.catalog_item_icons__big-foto的 src
僅在其父ul.catalog 中單擊 li 元素后。
那是我的嘗試:
$(".catalog_item_icons__preview").each(function () {
$(this).on("click", function() {
console.log('Clicked preview!');
// get image fileName
var smallImagePath = $(this).children("img").attr("src");
console.log("small image: " + smallImagePath);
var $bigPreview = $(this).closest('img.catalog_item_icons__big-foto').attr("src");
// print in console src of nearest big image
console.log($bigPreview);
});
});
我可以得到小圖像的src,但甚至無法在樹中讀取上面img的src。 控制台輸出:未定義。 不明白為什么:(
使用這個腳本:
$(document).ready(function() {
//It is executing a function when it is clicked on an item
$('.catalog_item_icons li').click(function() {
//Taking the source of the image of the clicked element.
//with $('img', this) you are choosing the the image in the clicked element
_src = $('img', this).attr('src');
//In the next line I am assigning to the _obj variable - the parent .catalog_item--default-view of the clicked element
_obj = $(this).parents('.catalog_item--default-view');
//In the next line i am changing the source attribute of the .catalog_item_icons__big-foto located in the _obj object
$('.catalog_item_icons__big-foto', _obj).attr('src', _src);
});
});
catalog_item_icons__big-foto 不是直接祖先,所以最接近的人不會找到它。 最接近的方法是看自己而不是看父母。 您要查找的元素不是父元素,而是其中一個父元素的子元素。
最簡單的事情是尋找頂部 li 並從那里找到圖像。
$(this).closest(".catalog_item catalog_item--default-view")
.find('img.catalog_item_icons__big-foto')
或選項是找到父 ul 並找到前一個兄弟,然后找到圖像。
問題是這里的最近()方法返回所選元素的第一個祖先。祖先是父,祖父母,曾祖父母,依此類推。
var $bigPreview = $(this).closest('img.catalog_item_icons__big-foto').attr("src");
您只需使用適合您的課程
var $bigPreview = $('img.catalog_item_icons__big-foto').attr("src");
這可能對你有幫助,檢查控制台下面的代碼對我有用
$("li.catalog_item_icons__preview").on("click", function(){
// get image fileName
var smallImagePath = $(this).children("img").attr("src");
console.log("small image: " + smallImagePath);
var bigPreview = $(this).parent('ul').siblings(".catalog_item_image").children(".catalog_item_icons__big-foto").attr("src");
// print in console src of nearest big image
console.log(bigPreview);
});
$("li.catalog_item_icons__preview").on("click", function(){ // get image fileName var smallImagePath = $(this).children("img").attr("src"); console.log("small image: " + smallImagePath); var bigPreview = $(this).parent('ul').siblings(".catalog_item_image").children(".catalog_item_icons__big-foto").attr("src"); // print in console src of nearest big image console.log(bigPreview); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="catalog"> <li class="catalog_item catalog_item--default-view"> <div class="catalog_item_image"> <img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto"> </div> <ul class="catalog_item_icons"> <li class="catalog_item_icons__preview"><img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"></li> <li class="catalog_item_icons__preview"><img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"></li> <li class="catalog_item_icons__preview"><img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"></li> </ul> </li> </ul>
嘗試這個
$(".catalog_item_icons__preview").click(function() { $(".catalog_item_icons__big-foto").attr("src", $(this).children("img").attr("src")); console.log($(".catalog_item_icons__big-foto").attr("src")); });
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="catalog_item_image"> <img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto"> </div> <ul class="catalog_item_icons"> <li class="catalog_item_icons__preview"> <img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"> </li> <li class="catalog_item_icons__preview"> <img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"> </li> <li class="catalog_item_icons__preview"> <img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"> </li> </ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.