0

Подскажите при нажатии на кнопку срабатывает первое событие без обновления страницы var deviceDiv = createElement("div", "gridElem singleSwitch borderShadow ui-btn ui-btn-up-b ui-btn-hover-b " + getSwitchClass(type, state));,(меняется фон и тд.), но второе var stateDiv = createElement("div","blur " + getSwitchClass(type, state)); событие остается не изменным, меняется только при обновлении страницы, что мне сделать, чтобы срабатывали оба события при клике? вот пример кода

function add_or_update_switch(device, device_no) {
var device_id = device["id"];

var hiddenDevices = getCookie("sl_hidden_devices");
if (hiddenDevices.split(" ").includes(device_id)) { return };

var name = device["name"];

if (name === 'Импульсный режим' || name === 'Если Выключатель коридор Кнопка 2 : ВЫКЛ' || name === 'Если Выключатель коридор Кнопка 2 : ВКЛ') {
    return
};

var state = device["data"]["state"];

var online = device["data"]["online"];
if (online === false) { state = false };
var icon = device["icon"];
var type = device["dev_type"];
var currentActionDiv = $('#action_' + device_id);
if (currentActionDiv.length === 0) {
    var deviceDiv = createElement("div", "gridElem singleSwitch borderShadow ui-btn ui-btn-up-b ui-btn-hover-b " + getSwitchClass(type, state));
    
    var stateDiv = createElement("div","blur " + getSwitchClass(type, state));
    stateDiv.innerHTML = "<div class='cir'></div><div class='cir2'></div>";

    var nameDiv = createElement("div", "switchName");
    nameDiv.innerHTML = name;
    var hideSpan = createElement("span", "hideDevice");
    hideSpan.innerHTML = "<img src='./images/hide.svg' title='Скрыть'>";
    hideSpan.onclick = function() {hide_device(device_id, name)};
    var imgTable = createElement("table", "switchImg");
    var imgTd = createElement("td");
    imgTd.innerHTML = createImg(icon, name);
    imgTable.appendChild(imgTd);

    if ("color_mode" in device["data"] && online === true) {
        var cTd = createColorSelector(device, device_no);
        imgTable.appendChild(cTd);
    }
    var actionDiv = createElement("div", "switchAction");
    actionDiv.id = "action_" + device_id;
    actionDiv.innerHTML = createActionLink(device_no, online, state, type); 
    if(type === 'scene'){nameDiv.innerHTML = "";}else{deviceDiv.appendChild(nameDiv);}
    deviceDiv.appendChild(hideSpan);
    deviceDiv.appendChild(imgTable);
    deviceDiv.appendChild(actionDiv);
    deviceDiv.appendChild(stateDiv);    

    if ("brightness" in device["data"] && online === true) {
        var bTable = createBrightnessSlider(device, device_no);
        deviceDiv.appendChild(bTable);
    }
    if ("color_temp" in device["data"] && online === true) {
        var ctTable = createColorTempSlider(device, device_no);
        deviceDiv.appendChild(ctTable);
    }
    $('#switches')[0].appendChild(deviceDiv);

    if (type === 'scene') {
        $('#test')[0].appendChild(deviceDiv);
        stateDiv.classList.add("hidden");
        return
    };  

    setUpColors(device_no);
    } else {

    var parentDiv = currentActionDiv.parent()[0];
    parentDiv.classList.remove("switch_true");
    parentDiv.classList.remove("switch_false");
    parentDiv.classList.add(getSwitchClass(type, state));
    currentActionDiv.remove();

    var newActionDiv = createElement("div", "switchAction");
    newActionDiv.setAttribute("id", "action_" + device_id);
    newActionDiv.innerHTML = createActionLink(device_no, online, state, type);

    parentDiv.appendChild(newActionDiv);
    if ("brightness" in device["data"] && online === true) {
        document.getElementById("brightness_" + device_id).value = device["data"]["brightness"] / 10;
    }
    if ("color_temp" in device["data"] && online === true) {
        document.getElementById("colortemp_" + device_id).value = ((device["data"]["color_temp"] - 1000) / 4.033) + 1000;
    }
}}

function getSwitchClass(type, state) {return "switch_" + (type === "scene" ? "scene" : state);}
3
  • Что значит не срабатывает? Может падает что? Дебажить пробовали?
    – SwaD
    Commented 19 окт. 2022 в 19:11
  • в реальном времени не переключается стиль var stateDiv = createElement("div","blur " + getSwitchClass(type, state)); stateDiv.innerHTML = "<div class='cir'></div><div class='cir2'></div>"; только после обновления страницы, а вот первый div с getSwitchClass(type, state) отрабатывает в режиме реального времени без перегрузки страницы
    – Misha Tp
    Commented 19 окт. 2022 в 19:22
  • Я так понимаю, что из-за return прекращается выполнение функции для второго дива function getSwitchClass(type, state) {return "switch_" + (type === "scene" ? "scene" : state);}
    – Misha Tp
    Commented 19 окт. 2022 в 19:45

1 ответ 1

0

Скорее всего это связно с тем, что вы создаете элемент, затем вы его добавляете в DOM, а уже позже меняете стиль.

У вас по коду есть 2 if(type === 'scene') и между ними type не переопределяется.

Перенесите определение стиля из второго в первый и должно все заработать

Первый:

if (type === 'scene'){
  nameDiv.innerHTML = "";
  stateDiv.classList.add("hidden");
} else {
  deviceDiv.appendChild(nameDiv);
}

Второй:

if (type === 'scene') {
  $('#test')[0].appendChild(deviceDiv);
  return
};

Если setUpColors нужно в конце функции, то надо убрать return из второго if

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.