Question

我应该将脚本添加到HTML文件中，这样当我点击星级评分系统中的第一颗星时，它会将src更改为'star-on.png'而不是'star-off.png ”。那，我能做到。但我无法弄明白如何制作它，以便如果用户点击第二颗星，它会将第一颗和第二颗恒星的src更改为“star-on.png”。

以下是我老师提供的代码：

<!-- 1. PUT YOUR NAME IN THIS COMMENT -->
<html>
    <head>
        <!-- 2. DO NOT EDIT THE CSS -->
        <style type="text/css">
            body {
                margin: 0;
            }
            div {
                width: 520px;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }

            img {
                width: 100px;
            }
        </style>
        <!-- 2.5 YOU MAY ALTER THE STYLING OF THE BUTTON IF YOU WISH. --> 
        <style type="text/css">
            button {
                width: 200px;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <!-- 3. DO NOT ALTER THE HTML EXCEPT TO ADD ONCLICK, ONLOAD, AND SIMILAR ATTRIBUTES -->
    <!-- AS NEEDED -->
    <body>
        <div>
            <img src="star-off.png"  id="one" class="2">
            <img src="star-off.png" id="two" class="2">
            <img src="star-off.png" id="three">
            <img src="star-off.png" id="four">
            <img src="star-off.png" id="five">
        </div>
        <button id="reset" onclick="document.getElementById('one').src='star-off.png'">Reset</button>
        <!-- 4. YOU MAY PUT YOUR SCRIPTING HERE -->

        <script>
            document.getElementById('one').onclick = function () {
            document.getElementById('one').src="star-on.png";
            }
            document.getElementById('two').onclick = function () {
            document.getElementById('two').src="star-on.png";
            }
            document.getElementById('three').onclick = function () {
            document.getElementById('three').src="star-on.png";
            }
            document.getElementById('four').onclick = function () {
            document.getElementById('four').src="star-on.png";
            }
            document.getElementById('five').onclick = function () {
            document.getElementById('five').src="star-on.png";
            }
        </script>
    </body>
</html>

除了脚本标签内的内容和按钮内的onclick外，它都是我老师的代码。

这就是它的样子：

What it looks like

Answer 1

嗯，你已经在脚本中完成了大部分内容。看看以下每一行：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;

class ExtractController extends Controller
{
    public function index()
    {

    $policy = '00006001';
    $test = \DB::connection('sqlsrv')->select('EXEC TestSelect(?)',array($policy));

    return view('extract.index');


    }//
}

基本上，每个人都说按其Id属性选择元素，在前面的组中通过此部分中的'id =“”标识：

document.getElementById('one').onclick = function () {
    document.getElementById('one').src="star-on.png";
}
document.getElementById('two').onclick = function () {
    document.getElementById('two').src="star-on.png";
}
document.getElementById('three').onclick = function () {
    document.getElementById('three').src="star-on.png";
}
document.getElementById('four').onclick = function () {
    document.getElementById('four').src="star-on.png";
}
document.getElementById('five').onclick = function () {
    document.getElementById('five').src="star-on.png";
}

然后附加一个onclick事件。触发该onclick事件时，请在事件规范之后执行您在每个等号右侧定义的功能。

在你的每个函数中，它只是识别DOM上与你提供的元素id相匹配的元素（就像你在上一节中分配事件处理程序一样）并且你要去将其'src'属性的值更改为您在equals右侧定义的字符串。

根据您的要求选择第二个。这是你引用的HTML（对于第一和第二颗星）：

<img src="star-off.png"  id="one" class="2">
<img src="star-off.png" id="two" class="2">
<img src="star-off.png" id="three">
<img src="star-off.png" id="four">
<img src="star-off.png" id="five">

这是你已经为第二个提供的事件处理程序：

<img src="star-off.png"  id="one" class="2">
<img src="star-off.png" id="two" class="2">

现在，如果您点击第二颗星，则只需将ID为“2”的元素的src属性更改为“star-on.png”图像。所以，如果你想在它之前更改星形的元素，它的ID为'one'，所以你需要在事件处理程序中添加这一行。

document.getElementById('two').onclick = function () {
    document.getElementById('two').src="star-on.png";
}

当然，有更有效的方法可以做到这一点，但毫无疑问，随着课程的进展，你将会了解它们。以下是此更新的事件处理程序：

document.getElementById('one').src = "star-on.png";

如何使onclick函数更改两个图像的src

1 个答案: