如何通过使用jQuery单击图像来获取类？
如何通过使用jQuery单击图像来获取类？
提问于 2020-08-06 21:12:24
我目前正在写一个智能家居系统的网页。我在每个房间/设备上都有一个主开关来打开或关闭as you can see here.
数据由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个点)做同样的事情，但我猜程序将是相同的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-06 21:26:35
为此，我建议您使用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">
Stack Overflow用户
发布于 2020-08-06 21:31:50
确实，如前所述，使用data属性可能更好，但实际上使用类很容易，它可能比将所有代码切换为data (以及它的所有怪癖可能来自混乱的attr和data调用)更快：
$('img').on('click', function(){
var test = /switch_id(\d+)/.exec(this.className);
if(test){
var id = test[1];
console.log(id);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="switch switch_id1" src="https://placeimg.com/160/120/any">
<img class="switch switch_id2" src="https://placeimg.com/160/120/any">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63284363
复制相关文章
相似问题
腾讯云开发者
