Question

我使用下面的功能将点击的图像旋转到#home-image div，从第一张图片开始。

使用Javascript：

$('#home-image').on({
    'click': function () {
        var origsrc = $(this).attr('src');
        var src = '';
        if (origsrc == 'img1_on.jpg') src = 'img2_on.jpg';
        if (origsrc == 'img2_on.jpg') src = 'img3_on.jpg';
        if (origsrc == 'img3_on.jpg') src = 'img4_on.jpg';
        if (origsrc == 'img4_on.jpg') src = 'img1_on.jpg';
        $(this).attr('src', src);
    }
});

HTML：

<img id="home-image" src="img1_on.jpg" />

但是

我想＆＃34;回声＆＃34;正在显示的图像的文件名，因此查看者可以看到图像的名称。

我将如何回应＆＃34;将图像的名称转换为另一个div，即<div id="home-image-name"></div>？

这是尝试将src的输出回显到home-image-name div，但它不起作用：

$('#home-image').on({
    'click': function () {
        var origsrc = $(this).attr('src');
        var src = '';
        if (origsrc == 'img1_on.jpg') src = 'img2_on.jpg';
        if (origsrc == 'img2_on.jpg') src = 'img3_on.jpg';
        if (origsrc == 'img3_on.jpg') src = 'img4_on.jpg';
        if (origsrc == 'img4_on.jpg') src = 'img1_on.jpg';
        $(this).attr('src', src);
    var output = 'src';
    document.getElementById("#home-image-name").innerHTML = output;
    }
});

这样可以使用额外的window.onload函数在页面加载时显示图像名称：

 window.onload = function(){
    $("#home-image-name").html($('#home-image').attr("src"))

$('#home-image').on({
    'click': function () {
        var origsrc = $(this).attr('src');
        var src = '';
        if (origsrc == 'img1_on.jpg') src = 'img2_on.jpg';
        if (origsrc == 'img2_on.jpg') src = 'img3_on.jpg';
        if (origsrc == 'img3_on.jpg') src = 'img4_on.jpg';
        if (origsrc == 'img4_on.jpg') src = 'img1_on.jpg';
        $(this).attr('src', src); 
        var output = 'src';
      document.getElementById("home-image-name").innerHTML = src;
}
});
}

Answer 1

所以，根据我的说法+ @ j08691评论，正确的sintax将是：

document.getElementById("home-image-name").innerHTML = src;

由于getElementById方法采用id的字符串，不需要＃。输出只是一个字符串，所以你可以改变output = src这是多余的，或者只是把src。

Jquery方式：

$("#home-image-name").html(src)

如果您想在点击之前在页面加载上执行此操作：

window.onload = function(){
    $("#home-image-name").html($('#home-image').attr("src"))
}

Answer 2

使用jQuery，一个简单的：

$('#home-image').click(function(){
    $('#home-image-name').html(this.src.split('/').pop())
})

应该有用。

<强> jsFiddle example

此外，如果您想将此代码用于多个图像，您可以使用以下（使用公共类）：

$('.home-image').click(function(){
    $('#home-image-name').html(this.src.split('/').pop())
})

<强> jsFiddle example

Answer 3

从

中删除#

document.getElementById("#home-image-name").innerHTML = output;

如何回应＆＃34;从Javascript函数到html的变量？

3 个答案: