JQuery 主题未正确加载

Question

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

任何帮助将不胜感激。

$('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>