Question

我有一些带有id的img标签但是通过验证我的代码，我意识到标签缺少src。唯一的问题是，在我的javascript中，这些img id是针对性的，当我将它们更改为div而不是图像消失。

此页面基本上是包含图像和内容的人员配置文件，用户单击箭头并转到下一个配置文件。代码如何工作是图像在外部javascript文件中，当我点击页面上的内容并检查html时，我看到图像出现在HTML中的图像标记内。这个javascript是给我的，所以我不知道是什么改变，我不太了解javascript。如果需要任何澄清或代码，请告诉我，这很难解释，因为我不明白发生了什么。

HTML-问题

    <img id='staff_image' class='staff_image'></img>
    <img id='staff_name' class='staff_name'></img>

HTML-页面

<div id='staff_slider' class='slider'>

    <div class='staff_container'>
        <img id='staff_image' class='staff_image' src"#" alt="image"
    </div>
        <img id='staff_name' class='staff_name' src"#" alt="image"></div>
        <div id='staff_details' class='staff_details'></div>
    </div>

    <div class='slider_navigation'>

        <img class='navLeft' src='../assets/images/staff_profile/slider/navLeft.png' alt= "nav left" onclick='navigate(-1);'/>
        <img class='navRight' src='../assets/images/staff_profile/slider/navRight.png' alt="nav right" onclick='navigate(1);'/>
    </div>

</div>

<script src="staff_profiles.js"></script>
<script src="slider.js"></script>
<script>
    navigate(0);
</script>

JAVASCRIPT- slider.js（这是用于滚动个人资料的两个箭头按钮）

    var slider_index = 0;

    function navigate(direction){
        slider_index += direction;

        if(slider_index < 0)
        {
            slider_index = profiles.length - 1;
        }
        else if(slider_index == profiles.length)
        {
            slider_index = 0;
        }

        loadProfile(profiles[slider_index]);
    }

    function loadProfile(profile)
    {
        var staff_image = document.getElementById('staff_image');
        staff_image.src = imgPath + profile.img;

        var staff_name = document.getElementById('staff_name');
        staff_name.src = titlePath + profile.title;

        var staff_details = document.getElementById('staff_details');
        staff_details.innerHTML = profile.details;
    }

JAVASCRIPT - staff_profiles.js（单独的文件，这些是配置文件所需图像的链接，内容是字符串）

var imgPath = "../assets/images/staff_profile/staff/";
var titlePath = "../assets/images/staff_profile/titles/";

var profiles =
[
    //
    {
        img:"fin.jpg",
        title:"fin.png",
        details:"<p>Stunt pilot with the Red Arrows (UK airforce stunt team), has served in combat choppers in 3 recent wars, and fears nothing except small dogs and single women.</p>" +
                "<p>Owns an Extra EA-200 for the ultimate full stunt flight experience, and flies all our other fixed wing craft much more sedately when required. And, yes, that is his real name. He's Irish and he doesn't want to talk about it.</p>"
    },
    //
    {
        img:"hans.jpg",
        title:"hans.png",
        details:"<p>Hans has flown almost everything there is to fly. Hanshas has flown almost everything there is to fly. He first took the controls of a small plane at 12 years old, and flew solo when he was 14. After a few years flying anything anywhere he settled into a series of test pilot jobs but left that because he prefers company when hes in the air.</p>"
    },
    //
    {
        img:"john.jpg",
        title:"john.png",
        details:"<p>With over 10,000 hours piloting helicopters in the bush and mountains of the Southern Alps for deer recovery and mountain rescue operations, Doc is well qualified to land you and your friends in remote parts of the country that only he knows about. He ll help you plot your route, drop extra provisions where you want them, and pick you up when your done.</p>"
    },
    {
        img:"wendy.jpg",
        title:"wendy.png",
        details:"<p>13 years commercial pilot in Africa, Russia and South America, during which she survived 3 crashes (none her own fault, she maintains). Owns a Cessna-172Skyhawk P that is ideal for low level sight seeing, rides a Harley and is a ski instructor during the seas</p>"
    }
];

Answer 1

您需要更改loadProfile function

中的以下行

var staff_image = document.getElementById('staff_image');
var myimg = staff_image.getElementsByTagName('img')[0];
myimg.src = imgPath + profile.img;

HTML可能就像这样

<div id='staff_image'>
     <img  src"#" alt="image"/>
 </div>

希望它对你有用

将javascript的目标更改为div

1 个答案: