设置带有Javascript日期的活动类来设置配色方案?

时间:2018-06-23 03:41:37

标签: javascript css html5 twitter-bootstrap css3

我对我的网站有一个想法,那就是将加拿大的红色星期五的颜色主题设置为星期五的红色,以支持我们的部队。我网站的主题有一个具有多个皮肤的现有皮肤更换器,您可以通过从列表中进行选择来设置皮肤,尽管我不想要该菜单,所以我删除了它,但保留了皮肤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不会更新。有没有办法自动进行此更新?

EDIT1:

这里是仍然位于页面底部的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);
                });

EDIT2:

这是我删除的菜单。我没有看到任何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 -->

1 个答案:

答案 0 :(得分:1)

菜单代码正在菜单元素上设置事件侦听器。找到它在哪里设置了事件侦听器,然后改为从您的代码中调用复制操作。

由于菜单代码通过替换单个元素上的类来实现外观更改,因此您应该可以执行以下操作:

lst=[['ahmad','a',5],['ahmad','b',6],['ahmad','x',4],['Emme','b',5],['Emme','b',4]]

lst_2=['ahmad','b']

indices = [i for i, l in enumerate(lst) if is_ordered_sublist(lst_2, l)]

print(indices) # [1]