Question

我只是javascript的初学者，我试图让javascript从特定图像中获取具有特定类的图像src并将src放入div。

<div class="result"></div>
<div class="ilist">
<a href="#"><img src="images/dog.jpg" class="thumbnail"></a>
<a href="#"><img src="images/bird.jpg" class="thumbnail"></a>
<img src="images/cat.jpg" class="selected__img">  // THIS IS THE DESIRED IMAGE
</div>

我想在结果div中显示的是this = images / cat.jpg 但它没有显示任何东西或一些奇怪的东西......

javascript现在

var simg = document.getElementsByClassName('selected__img').src;
document.getElementsByClassName("result").innerHTML = simg;

很抱歉这是一个新手，但我正在努力学习..

Answer 1

＆＃13;

$(document).ready(function() {
            $('img').hover(function(){
				$('.result').html($(this).attr('src'));
			});
		});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="result">Image path</div>
<div class="ilist">
<a href="#"><img src="images/dog.jpg" class="thumbnail"></a>
<a href="#"><img src="images/bird.jpg" class="thumbnail"></a>
<img src="images/cat.jpg" class="selected__img">  // THIS IS THE DESIRED IMAGE
</div>

＆＃13;

Answer 2

你需要迭代元素，因为你有一个selected__img你可以使用0如下：

var simg = document.getElementsByClassName('selected__img')[0].src;
document.getElementsByClassName("result").innerHTML = simg;

Answer 3

getElementsByClassName是NodeList集合。因此，您需要使用[0]：

来获取单个节点

var simg = document.getElementsByClassName('selected__img')[0].src;
document.getElementsByClassName("result")[0].innerHTML = simg;

在这个特定情况下，使用返回一个元素的querySelector metod更方便：

var simg = document.querySelector('.selected__img').src;
document.querySelector(".result").innerHTML = simg;

或者因为你正在使用jQuery：

var simg = $('.selected__img').attr('src');
$(".result").text(simg);

Answer 4

getElementsByClassName（）方法返回文档中具有指定类名的所有元素的集合，作为NodeList对象。

NodeList对象表示节点的集合。可以通过索引号访问节点。索引从0开始。

试试这个：

   <script>
        var simg = document.getElementsByClassName('selected__img');
        var src=simg[0].src;
        var resutlObj=document.getElementsByClassName("result")[0]
        resutlObj.innerHTML = src;
    </script>

Javascript获取img src并在div中显示链接

4 个答案: