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

Question

我的示例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。 控制台输出：未定义。 不明白为什么:(

Answer 1

使用这个脚本：

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

Answer 2

catalog_item_icons__big-foto 不是直接祖先，所以最接近的人不会找到它。 最接近的方法是看自己而不是看父母。 您要查找的元素不是父元素，而是其中一个父元素的子元素。

最简单的事情是寻找顶部 li 并从那里找到图像。

$(this).closest(".catalog_item catalog_item--default-view")
    .find('img.catalog_item_icons__big-foto')

或选项是找到父 ul 并找到前一个兄弟，然后找到图像。

Answer 3

问题是这里的最近（）方法返回所选元素的第一个祖先。祖先是父，祖父母，曾祖父母，依此类推。

 var $bigPreview = $(this).closest('img.catalog_item_icons__big-foto').attr("src");

您只需使用适合您的课程

 var $bigPreview = $('img.catalog_item_icons__big-foto').attr("src");

Answer 4

这可能对你有帮助，检查控制台下面的代码对我有用

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

Answer 5

尝试这个

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