将javascript的目标更改为div

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>

希望对你有用