Question

这里是小提琴，我面临的问题是，尝试从右侧面板选择一个主题（尝试正确按下右上角的按钮），更改为主题B，并查看左侧面板的变化，你最初不会看到主题效果，但当你将鼠标悬停在按钮上时，会发生主题变化。

任何帮助都将不胜感激。

$('input[name=theme-options]').change(function() {
                var currentTheme = $('#content1').attr('data-theme');
                var currentThemeH = $('#headermaster').attr('data-theme');
                var currentThemeD = $('#demo-page').attr('data-theme');
                var currentThemeL = $('#left-panel').attr('data-theme');
                var currentThemeR = $('#right-panel').attr('data-theme');
                var selectedTheme = $(this).val();



            $('#content1').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');
            $('#headermaster').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');

                $('#left-panel').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');

                $('#right-panel').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');
                $('#link1').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');
                $('#link2').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');
                $('#link3').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');
                $('#link4').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');
                $('#link5').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');
                $('#link6').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).trigger('create');

            $("#demo-page").change();
            $("#left-panel").change();
            $("#right-panel").change(); 
            });

这是Fiddle。

Answer 1

希望这能解决您的问题：

$('input[name=theme-options]').change(function() {
            var currentTheme = $('#content1').attr('data-theme');
            var currentThemeH = $('#headermaster').attr('data-theme');
            var currentThemeD = $('#demo-page').attr('data-theme');
            var currentThemeL = $('#left-panel').attr('data-theme');
            var currentThemeR = $('#right-panel').attr('data-theme');
            var selectedTheme = $(this).val();              


        $('#content1').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).change();
        $('#headermaster').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).change();

            $('#left-panel').removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-' + selectedTheme).attr('data-theme', selectedTheme);

            $('#right-panel').attr('data-theme', selectedTheme).removeClass('ui-body-' + currentTheme).addClass('ui-body-' + selectedTheme).change();

Edit:
 $("#listpanel li").each(function(){
        $(this).removeClass('ui-btn-up-' + currentTheme).addClass('ui-btn-up-' + selectedTheme);

                $(this).removeClass('ui-btn-down-' + currentTheme).addClass('ui-btn-down-' + selectedTheme);
        })

        $("#demo-page").change();
        $("#left-panel").change();
        $("#right-panel").change(); 
        });



    </script>


</body>

JQuery主题没有正确加载

1 个答案: