javascript - 使用 Javascript 日期设置事件类以设置配色方案？

Question

我对我的网站有一个想法，即在加拿大的“红色星期五”将颜色主题设置为红色，以支持我们的军队。我网站的主题有一个现有的皮肤更换器，您可以通过从列表中选择来设置多个皮肤，但我不想要那个菜单，所以我删除了它但保留了皮肤 css。

这是我目前的尝试，它将红色皮肤设置为事件状态，但页面未更新为颜色。

        <div id="skin-decider-container">
            <div id="color-skin-1" class="color-skin"></div>
            <div id="color-skin-2" class="color-skin"></div>
        </div>
        <script>
            var decider = document.getElementById("skin-decider-container");
            var skins = decider.getElementsByClassName("color-skin");
            var d = new Date().getDay();
            console.log(d);
            if(d == 5) {
                skins[1].className += " active";
            } else {
                skins[0].className += " active";
            }

            console.log(skins[0].id + " " + skins[0].className);
            console.log(skins[1].id + " " + skins[1].className);
        </script>

控制台输出:(正确)

5
color-skin-1 color-skin
color-skin-2 color-skin active

但是 html 没有更新。有没有办法自动进行此更新？

编辑1:

这是仍在页面底部的 jQuery，用于监听皮肤选择器的点击。有什么方法可以让它自动进行吗？

               jQuery(".color-skin").click(function () {
                    var cls = this.id;
                    jQuery(".color-skin").removeClass("active");
                    jQuery(this).addClass("active");
                    jQuery("#main-wrapper").removeClass();
                    jQuery("#main-wrapper").addClass(cls);
                });

编辑2:

这是我删除的菜单。我没有看到任何 onClick=

<div id="skin-chooser-container" class="skin-chooser-container">
                <a data-toggle="modal" href="#myModal" class="skin-chooser hidden-xs"><i class="icon-cogs"></i></a>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">CHOOSE COLOR SKIN</h4>
                            </div>
                            <div class="modal-body">
                                <div class="skins-wrapper">
                                    <ul class="list-inline">
                                        <li>
                                            <div id="color-skin-1" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-2" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-3" class="color-skin active"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-4" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-5" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-6" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-7" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-8" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-9" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-10" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-11" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-12" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-13" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-14" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-15" class="color-skin"></div>
                                        </li>
                                        <li>
                                            <div id="color-skin-16" class="color-skin"></div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->
            </div>
            <!-- /#skin-chooser-container -->

Answer 1

菜单代码在菜单元素上设置事件监听器。找到它设置事件监听器的位置，然后从您的代码中调用复制它正在执行的操作。

由于菜单代码是通过替换单个元素上的类来实现外观更改的，因此您应该可以这样做:

switch(new Date().getDay()) {
    case 5: // friday
            jQuery("#main-wrapper").removeClass().addClass('color-skin-2'); 
            break;
}