Как получить класс, щелкнув изображение с jQuery?

Question

В настоящее время я работаю над веб-страницей для системы умного дома. У меня есть главный выключатель для каждой комнаты / устройства, чтобы включить или выключить его , как вы можете видеть здесь.

Данные обрабатываются jQuery, и все данные устройства / комнаты хранится в файле JSON.

Теперь мне нужно определить, какую кнопку я нажимаю и какому «id» она принадлежит в файле JSON.

Я уже сделал убедитесь, что каждый из этих переключателей имеет класс с 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
}

Я хотел бы создать функцию, которая определяет JSON 'id' переключателя, который я нажимаю, читая его HTML класс, но как мне это сделать?

Мне также нужно будет сделать то же самое для значка «избранное» и рейтинга (эти 5 точек), но, думаю, для этого процедура будет такой же.

Answer 1

Я бы посоветовал вам использовать для этого атрибут 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">

Answer 2

• 1000 и 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">