Question

我正在尝试建立一个有人物肖像的网站，并且用户将能够单击肖像以查看有关该人物的更多信息。下面的文本框将在单击每个配置文件时更改文本描述。

我试图使图像成为各种按钮，然后通过java脚本应用click事件以更改描述文本。

我有以下代码：

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>About</title>
    <link rel="stylesheet" type="text/css" href="Styles.css" />
    <script src="Scripts/jquery-3.3.1.intellisense.js"></script>
    <script src="Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <header>
        <img src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />
        <h1 id="title">
            CompTech Inc. 2018 Conference
        </h1>
    </header>
    <nav id="navbar">
        <span>
            <a href="Indedx.html">Home</a>
            <a href="Program.html">Program</a>
            <a href="About.html" class="inactivelink">About</a>
            <a href="Registration.html">Registration</a>
            <a href="Sitemap.html">Sitemap</a>
        </span>
    </nav>

    <main>
        <div id="container">
            <article>
                <section id="personnel">
                    <h2>Personnel</h2>
                    <p>Find out more about the staff that you will be meeting at the event</p>
                    <button id="jim" class="profile"></button>
                    <button id="arcturus" class="profile"></button>
                    <button id="sarah" class="profile"></button>
                    <button id="jaina" class="profile"></button>
                    <div id="descriptioncontainer">
                        <p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
                    </div>
                </section>
            </article>
        </div>
    </main>

    <footer>
        <img src="Images/Logo.png" id="logofooter" class="logo" alt="CompTech Logo" />
        <p>
            <strong>&#169; Copyright CompTech Inc.</strong> <br />
            <address>123 Knotareal Pl, Sydney CBD, NSW, 2018</address>
            customerservice@comptech.org <br />
            (02) 6258 7412
        </p>
    </footer>

    <script src="About.js"></script>
</body>
</html>

JS

(function clickEvent() {
    var portraits = document.getElementByClassName("profile");

    var counter;
    for (counter = 0; counter < profile.length; counter++) {

        portraits[counter].onclick = function () {

        }
    }
        })

CSS

button.profile.active, button.profile:hover {
    cursor:pointer;
}

.profile {
    width: 250px;
    height: 250px;
    display: inline-block;
    margin-top:2%;
}

#jim {
    background-image: url('Images/JimRaynor.png');
}

#arcturus {
    background-image: url('Images/ArcturusMensk.png');
}

#sarah {
    background-image: url('Images/SarahKerrigan.png');
}

#jaina {
    background-image: url('Images/JainaProudmore.png');
}

#descriptioncontainer {
    border-style:solid;
    border-color:whitesmoke;
    padding:5px;
    min-height:100px;
}

我在正确的轨道上，从这里到哪里去？任何帮助将不胜感激

Answer 1

您可以像这样为图像分配一个ID：

<img id="myImage" src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />

，然后在javasript中，您可以通过其ID获取元素，并为它分配一个click事件，如下所示：

document.getElementById("myImage").onclick = function() {
//your code here
}

编辑：

对于您来说，您还可以执行以下操作：将<button>标签中的所有<img>标签替换为图片的来源，并调用javascript函数通过将其发送到参数直接在img标签属性中。

例如：

在html中，对所有个人资料执行此操作：

<img src="Images/JimRaynor.png" onclick="changeDescription('Write the description of Jim HERE')"/>

并且在javascript中，您可以编写一个函数来接收参数中的字符串并更改页面中的描述：

function changeDescription(description) {
document.getElementById('description').innerHTML = description;
}

Answer 2

@Math感谢您的帮助，您的解决方案运行完美。但是我一直在玩它，并想到了：

HTML5

<main>
        <div id="container">
            <article>
                <section id="personnel">
                    <h2>Personnel</h2>
                    <p>Find out more about the staff that you will be meeting at the event</p>
                    <img src="Images/ArcturusMensk.png" id="arcturus" class="profile" />
                    <img src="Images/JainaProudmore.png" id="jaina" class="profile"/>
                    <img src="Images/JimRaynor.png" id="jim" class="profile"/>
                    <img src="Images/SarahKerrigan.png" id="sarah" class="profile"/>
                    <p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
                </section>
            </article>
        </div>
    </main>

JS

(function () {
        var profiles = document.getElementsByClassName('profile');
        var counter;
        var description;

        for (counter = 0; counter < profiles.length; counter++) {
            profiles[counter].onclick = function () {
                description = this.id;

                switch (description) {
                    case 'jim':
                        document.getElementById('description').innerHTML = "text";
                        break;
                    case 'arcturus':
                        document.getElementById('description').innerHTML = "text";
                        break;
                    case 'sarah':
                        document.getElementById('description').innerHTML = "text";
                        break;
                    default:
                        document.getElementById('description').innerHTML = "text.";
                        break;
                };
            };
        }
    })();

Answer 3

首先，我认为您在使用type标签时应该使用button属性。其次，我认为您可以使用<a>标记代替按钮并在其上调用函数，并带有一个携带肖像名称的参数，以便您可以将该参数用作函数中的条件并更改描述文字。请按照以下步骤操作：

以下是HTML：

<main>
        <div id="container">
            <article>
                <section id="personnel">
                    <h2>Personnel</h2>
                    <p>Find out more about the staff that you will be meeting at the event</p>
                    <a href="javascript:void(0)" onclick="changeDescription(jim)" id="jim" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(arcturus)" id="arcturus" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(sarah)" id="sarah" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(jaina)" id="jaina" class="profile"></a>
                    <div id="descriptioncontainer">
                        <p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
                    </div>
                </section>
            </article>
        </div>
    </main>

以下是功能：

function changeDescription(name) {
 var descriptionTag = document.getElementById('description');

  if(name == 'jim') {
    descriptionTag.innerText = 'This is jim';
  }
  else if(name == 'arcturus') {
    descriptionTag.innerText = 'This is arcturus';
  }
}

等等。我希望你明白我的意思。

创建可点击的图像并将点击事件监听器应用于它

3 个答案: