Question

嗨我有一个这样的剧本：

$(".news-button").click(function(){
    var img = document.getElementById('news-image').src;
    if (img.indexOf('news-bt-1.png')!=-1) {
        document.getElementById('news-image').src  = 'img/news-bt-2.png';
    }
    else {
        document.getElementById('news-image').src = 'img/news-bt-1.png';
    }

});

它工作正常，但现在我想将新闻图片从ID更改为类，以便如何更改上面的代码？

Answer 1

您可以使用getElementsByClassName代替getElementById

Answer 2

使用： -

document.getElementsByClassName('news-image')[0].src

由于getElementsByClassName返回数组，因此需要使用它的索引。

但是正如我可以看到你在点击事件上使用jquery那么为什么你在里面使用javascript而不是在里面使用jquery会帮助你跨平台

$(".news-image").each( function() {
   var img= $(this).attr('src');
 if (img.indexOf('news-bt-1.png')!=-1) {
           $(this).attr('src','img/news-bt-2.png') 
  }else{
  $(this).attr('src','img/news-bt-1.png') 
  }

}）;

Answer 3

您可以使用

var elements = document.getElementsByClassName(classname)

它将为您提供与数组匹配的所有元素。因此，首先确保获得数组，然后访问元素[index]

等元素

Answer 4

您可以使用getElementsByClassName并选择第一个元素，因为此方法返回按列表中元素位置排序的元素列表。

因此，假设您想要获取的元素是第一个出现在您的HTML代码中的元素，您可以这样做：

document.getElementsByClassName("news-image")[0]

如果它不是第一个，您可以更改数字并选择另一个元素：

document.getElementsByClassName("news-image")[2] // third element

您还可以使用querySelector 来选择与给定CSS选择器匹配的第一个元素，在我看来，这更容易：

document.querySelector("img.news-image")

最后，因为我也看到你使用jQuery ，你可以像这样使用它的选择器：

$("img.news-image")[0]

谈论您的具体代码，这是您正在寻找的解决方案：

$(".news-button").click(function(){
    var img = $('img.news-image')[0];
    if (img.src.indexOf('news-bt-1.png')!=-1) {
        img.src  = 'img/news-bt-2.png';
    }
    else {
        img.src = 'img/news-bt-1.png';
    }
});

Answer 5

使用以下代码，只需将className替换为标记img的实际类名：

$(".news-button").click(function () {
        var img = document.getElementById('news-image').src;
        var img1 = document.getElementsByClassName("className");
        if (img.indexOf('news-bt-1.png') != -1) {
            img1.src = 'img/news-bt-2.png';
        }
        else {
            img1.src = 'img/news-bt-1.png';
        }

    });

Answer 6

您也可以使用Jquery。

获取图片来源：

$('.classname').attr('src')

从getElementById更改为getElementsByClassName

6 个答案: