这是 fiddle ,我面临的问题是,尝试从右侧面板中选择一个主题(尝试正确按下右上角的按钮),更改为主题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 .
最佳答案
希望这能解决您的问题:
$('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 主题未正确加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17522324/