Question

我希望一次显示一个星形图标图片，包含两个星形图标，一个是空白的，另一个是黄色的，将点击或点击触摸屏设备进行交换。

还有一件事，我需要的是交换时，我想在flag变量中存储值为0或1.star1.jpg（空白/暗星）表示为0 value.star2.jpg（黄色星）表示为1。

谷歌餐厅结果的实际例子，右侧的星形按钮。 http://gilsmethod.wpengine.netdna-cdn.com/wp-content/uploads/2010/11/google-hotpot-recommendations-android-maps.png

我想要简单的编码。

HTML

<html>
<head>
</head>
<body>

<table>
                <tbody>
                    <tr>
                        <td width="91%">Restaurant 1</td>
                        <td>
                                <a href="">
                                    <img border="0"
                                    src="star1.jpg"
                                    width="100%" height="100%" align="middle" >
                                </a>
                        </td>
                    </tr>
                    <tr>
                        <td>Restaurant 2</td>
                        <td>
                                <a href="">
                                    <img border="0"
                                    src="star1.jpg"
                                    width="100%" height="100%" align="middle" >
                                </a>
                        </td>
                    </tr>
                </tbody>
            </table>

</body>
</html>

Answer 1

我认为表格布局在你的情况下不是最好的HTML模型（但你可以根据需要修改和应用这个javascript）。

所以，看看这个（我已经测试了移动设备并且它可以工作）。 http://www.jqueryrain.com/2014/08/bootstrap-rating-jquery-rating-plugin/

以下是其他示例： http://www.jqueryrain.com/demo/jquery-rating-plugin/

Answer 2

如果我更正，这是您正在寻找的答案。你的问题唯一的标签是HTML，但我认为你正在寻找一个JS解决方案，因为你在谈论变量。

您可以添加onclick事件来更改明星

<img src="star1.jpg" onclick="changeStar(this)">

然后在您的JS文件或<script></script>标记

中写入

var flag-variable = 0;
function changeStar(star){
    if(flag-variable == 0){//blank
        star.src = "star2.jpg";
        flag-variable = 1;
    }else{//yellow
        star.src = "star1.jpg";
        flag-variable = 0;
    }
}

如何在html中切换图像并在flag变量中存储0或1？

2 个答案: