Javascript 如何从特定元素获取图像src

我的示例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>

我可以得到小图像的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\u item\u icons\u big-foto不是直接的祖先，因此最近的metod无法找到它。最近的metod查看自身，而不是查看父元素。您要查找的元素不是父元素，而是这些父元素之一的子元素

最简单的事情是寻找顶端的李，并从那里找到图像

$(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\u item\u icons\u preview”）。在（“单击”，函数（）{
//获取图像文件名
var smallImagePath=$（this.children（“img”）.attr（“src”）；
log（“小图像：+smallImagePath”）；
var bigPreview=$（this）.parent（'ul'）。同胞（'catalog\u item\u image'）。children（'catalog\u item\u icons\u big-foto'）。attr（'src'）；
//在控制台src中打印最近的大图像
log（bigPreview）；
})；

试试这个

$（“.catalog\u item\u icons\u preview”）。单击（函数（）{
$（“.catalog\u item\u icons\u big-foto”）.attr（“src”，“this”）.children（“img”）.attr（“src”）；
console.log（$（“.catalog\u item\u icons\u big-foto”）.attr（“src”）；
})；

请提供jsfiddle.

$（'.catalog\u item\u image img'）.attr（'src'））

？最接近父元素，元素在树上移动时不是父元素。Viktor，非常感谢！这很有效！但我仍然不明白它直接做了什么：_src-我单击的图像的src属性_obj-？这是用于选择所需元素$（'.catalog\u item\u icons\u big-foto'，_obj）.attr（'src'，_src）；非常感谢？我说的对吗，我们正在更改所选对象的src？如果我已经帮助您批准我的答案并投赞成票，请告诉我。我将更改帖子，并解释它是如何工作的。我的声誉不足以投票。这是我在这里的第一个问题。我更改了帖子，并评论了它是如何工作的。谢谢，但这是我的第一个问题更改所有元素的图像，但对于我的任务范围，是在当前div中，其中带有小图像的li是.Chage

$（“.catalog\u item\u icons\u big-foto”）.attr（“src”），$（this.children（“img”）.attr（“src”）；

to

$（this.parrents（.catalog\u item\u icons\u big-foto”）.attr（“src”），$（this.childrents（“img”）.attr”）；

谢谢Krupesh！我会试试你的解决方案，但最好的解决方案是第一个提供的by@Viktor马克西莫夫

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