时间戳

首页 > 解决方案 > 如何通过使用 jQuery 单击图像来获取课程？

javascript - 如何通过使用 jQuery 单击图像来获取课程？

问题描述

我目前正在开发智能家居系统的网页。如您在此处看到的，我为每个房间/设备都有一个主开关来打开或关闭它 。

数据由 jQuery 处理，所有设备/房间数据都存储在 JSON 文件中。

现在我需要确定我正在单击的按钮以及它在 JSON 文件中也属于哪个“id”。

我已经确保这些开关中的每一个都有一个名称中带有 JSON 'id' 的类，所以我目前的情况如下所示：

<img class="switch switch_id1" src="img/svgs/toggle-on_dark.svg">

JSON 条目如下所示：

{
    "id": 1,
    "room": "Kitchen",
    "name": "Light controller",
    "favourite": false,
    "rating": 3,
    "select_1": "Off",
    "select_2": "On",
    "select_3": "Dinner",
    "select_4": "Bar",
    "category": "switch",
    "on": true
}

我想创建一个函数，通过读取它的 HTML 类来检测我单击的开关的 JSON 'id'，但我该怎么做呢？

我还需要对“收藏”图标和评分（那 5 个点）做同样的事情，但我想这个过程是一样的。

标签： javascripthtmljqueryjson

解决方案

我建议你为此使用一个data-属性，如果使用 jquery 它特别容易阅读

$(document).on('click','.switch',function(){
    console.log($(this).data("switchid"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="switch" data-switchid="1" src="https://via.placeholder.com/150">

你也可以在没有 jQuery 的情况下做到这一点

document.querySelector(".switch").onclick = function(){
   console.log(this.getAttribute("data-switchid"));
}
<img class="switch" data-switchid="1" src="https://via.placeholder.com/150">

推荐阅读