javascript - 没有用js刷新悬停

问题描述

我的网站上有颜色切换器。我是 js 和 jquery 的新手，但我编写了它的代码。简单地说，它会更改 css 信息以更改颜色和背景颜色及其悬停。

但是我的颜色切换器在第一次更改后不会更改悬停颜色。

所以，如果你注意到下面的 youtube 视频（屏幕截图），在第一次滑动后，棕色不再出现。棕色属性消失了。

您可以在我的网站上查看或工作：

https://resimli.yedek.deniz-tasarim.site/-

这是 YouTube 视频：

https://www.youtube.com/watch?v=C0wkBpgMNjo&feature=youtu.be

我该如何解决？

这是所有的js代码：

jQuery(document).ready(function($) {
    "use strict"

    document.querySelectorAll('*').forEach(function(node) {
        const style = window.getComputedStyle(node);
        const color = style.getPropertyValue('color');
        const Bcolor = style.getPropertyValue('background-color');




        if (color === 'rgb(22, 160, 133)') {

            $("ul.colors .color1").on('click', function() {
                node.style.setProperty("color", "red", "important");

                var colorv = 'orange';
                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = '.cssClass:hover { background-color:  cyan!important ; } .colorful-buton-class:hover { background-color:  cyan!important ; }  .title-bottom:before {background-color: red!important; } .mt-separator::before, .mt-separator:before, .mt-separator::after {background-color: red!important; }  .ulockd-btn-thm2:hover { background-color:cyan!important; }               .ulockd-btn-thm2 { background-color:brown!important; }                          .wpforms-form button[type=submit]:hover { background-color:cyan!important; } .elementor-icon, .elementor-heading-title { color:red!important; }  ';
                document.getElementsByTagName('head')[0].appendChild(style);

                document.querySelectorAll(".ulockd-btn-white").forEach(function(node) {
                    node.classList.add("cssClass");
                });



                return false;
            });

            $("ul.colors .color2").on('click', function() {
                node.style.setProperty("color", "pink", "important");



                var colorv = 'orange';
                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = '.cssClass:hover { background-color:  orange!important ; } .colorful-buton-class:hover { background-color:  orange!important ; }  .title-bottom:before {background-color: red!important; } .mt-separator::before, .mt-separator:before, .mt-separator::after {background-color: red!important; }  .ulockd-btn-thm2:hover { background-color:orange!important; } .wpforms-form button[type=submit]:hover { background-color:orange!important; } .elementor-icon, .elementor-heading-title { color:red!important; }  ';
                document.getElementsByTagName('head')[0].appendChild(style);

                document.querySelectorAll(".ulockd-btn-white").forEach(function(node) {
                    node.classList.add("cssClass");
                });

                return false;
            });

        }

        if (Bcolor === 'rgb(22, 160, 133)') {

            $("ul.colors .color1").on('click', function() {
                node.style.setProperty("background-color", "red", "important");
                document.querySelector(".ulockd-btn-white").classList.add("mystyle");

                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = '.cssClass:hover { background-color:  cyan!important ; } .colorful-buton-class:hover { background-color:  cyan!important ; }  .colorful-buton-class > * > * > [role=button] { background-color:  cyan!important ; }  .wpforms-form button[type=submit]:hover { background-color:cyan!important; }  ';
                document.getElementsByTagName('head')[0].appendChild(style);

                return false;
            });

            $("ul.colors .color2").on('click', function() {
                node.style.setProperty("background-color", "pink", "important");



                document.querySelector(".ulockd-btn-white").classList.add("mystyle");

                var style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML = '.cssClass:hover { background-color:  orange!important ; } .colorful-buton-class:hover { background-color:  orange!important ; }  .colorful-buton-class > * > * > [role=button] { background-color:  orange!important ; }  .wpforms-form button[type=submit]:hover { background-color:orange!important; }  ';
                document.getElementsByTagName('head')[0].appendChild(style);


                return false;
            });

        }


    });

    $("#color-style-switcher .bottom a.settings").on('click', function(e) {
        e.preventDefault();
        var div = $("#color-style-switcher");
        if (div.css("left") === "-195px") {
            $("#color-style-switcher").animate({
                left: "0px"
            });
        } else {
            $("#color-style-switcher").animate({
                left: "-195px"
            });
        }
    });

    $("ul.colors li a").on('click', function(e) {
        e.preventDefault();
        $(this).parent().parent().find("a").removeClass("active");
        $(this).addClass("active");
    })
});


jQuery('head').append('<link rel="stylesheet" id="colors" href="http://hekim.deniz-tasarim.site/wp-content/plugins/Hekim/widgets/css/colors/default.css" type="text/css" />');
jQuery('head').append('<link rel="stylesheet" href="http://hekim.deniz-tasarim.site/wp-content/plugins/Hekim/widgets/css/color-switcher.css" type="text/css" />');

标签： javascriptjquerycss

解决方案

首先，您forEach对文档中的所有元素执行 a（由选择document.querySelectorAll('*')）。在那里，您在由常见查询选择的元素上分配事件侦听器，$("ul.colors .color1")并且$("ul.colors .color2")（仅当它们的计算样式满足某些条件时）。这样，每次用户点击任何$("ul.colors .color1")元素时，都会为第一个查询中找到的每个元素执行一次事件侦听器回调document.querySelectorAll('*')。你可能不想要那个。

我假设您希望页面中与某些计算样式匹配的所有元素在颜色选择器更改其值时发生更改。

首先：一旦你改变颜色，计算出来的颜色就会不同，所以条件匹配器会改变（不再匹配）。所以你想要下一个：

保存/缓存受影响的元素（更高效且不易出错）
自动更改与当前选择的颜色的匹配条件

然后，此代码可能会对此有所帮助：

const colorMatchedElements = [...(document.querySelectorAll('*'))]
  .filter(function(node) {
        const style = window.getComputedStyle(node);
        const color = style.getPropertyValue('color');

        return color === 'rgb(22, 160, 133)'
  });
const BcolorMatchedElements = [...(document.querySelectorAll('*'))]
  .filter(function(node) {
        const style = window.getComputedStyle(node);
        const Bcolor = style.getPropertyValue('background-color');

        return Bcolor === 'rgb(22, 160, 133)'
  });

$("ul.colors .color1").on('click', function() {
    colorMatchedElements.forEach( node => node.style.setProperty("color", "red", "important") );
    BcolorMatchedElements.forEach( node => node.style.setProperty("background-color", "red", "important") );

    // ...

    return false;
});

$("ul.colors .color2").on('click', function() {
    colorMatchedElements.forEach( node => node.style.setProperty("color", "pink", "important") );
    BcolorMatchedElements.forEach( node => node.style.setProperty("background-color", "pink", "important") );

    // ...

    return false;
});

您甚至可以改进此代码，例如抽象所有颜色的点击事件，以便它从点击事件中获取选定的值（例如）。

编辑

修复了一个错误：querySelector返回值是一种NodeList类型。您需要将其转换为Array能够filter在其上使用的。

javascript - 没有用js刷新悬停

问题描述

解决方案

编辑

推荐阅读