时间戳

首页 > 解决方案 > Javascript/Jquery - 获取可见图像的链接

javascript - Javascript/Jquery - 获取可见图像的链接

问题描述

我有一些模态，其中有一些图像。我还有一个下载按钮，它应该只下载模态中显示的（唯一可见的）图像。
我试图使下载按钮的href链接等于可见图像href，但它似乎不起作用......
在这里你可以看到完整的页面代码，但我感兴趣的部分是这个：

<div id="myModal_12" class="modal">
  <div class="modal-content">
    <div class="Slide mySlides_12">
      <div class="numbertext">1 / 3</div>
      <img src="uploads/IMG_4946.JPG43879.jpg" class="little_image" style="width:50%;">
    </div>
    <div class="Slide mySlides_12">
      <div class="numbertext">2 / 3</div>
      <img src="uploads/IMG_4949.JPG21730.jpg" class="little_image" style="width:50%;">
    </div>
    <div class="Slide mySlides_12">
      <div class="numbertext">3 / 3</div>
      <img src="uploads/IMG_4950.JPG72501.jpg" class="little_image" style="width:50%;">
    </div>
    <!-- Next/previous controls -->
    <div class="input-group-btn">
      <a onclick="downloadFunction(this)">Download this image</a>
    </div>

    <span class="close cursor" onclick="closeModal(12)">
                                                    <img src="/images/close.png">
                                                </span>
    <a class="prev" style=" display: block; " onclick="plusSlides(-1, 12)">&#10094;</a>
    <a class="next" style=" display: block; " onclick="plusSlides(1, 12)">&#10095;</a>
  </div>
</div>
</div>


<script>
  function downloadFunction(linkElement) {
    var little_image = document.getElementsByClassName("little_image"); // Get all the images with that class
    var right_image = $(little_image).not(":hidden"); // Get just the visible image
    var src = right_image.src;
    linkElement.href = src; // Set the link href on the visible image src
  }
</script>

JavaScript函数返回一个“未定义”的值......
非常感谢任何帮助

标签： javascriptjquery

解决方案

要获取src元素的属性，您应该使用该attr(<attribute>)方法。鉴于您正在尝试做的事情，这个逻辑可以简化为：

linkElement.href = $('.little_image:visible').attr('src');

推荐阅读