我正在尝试创建一个jquery函数,它在jqm页面上的网格和列表类型布局之间切换。这是我的html结构:
<div data-role="page" id="portfolio">
<div data-role="header">
<a href="#main" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true"></a>
<h1>Projects</h1>
<a href="javascript:changeLayout()" id="changelayout" class="ui-btn-right" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true"></a>
</div>
<div data-role="content">
<ul id="projects">
<li><a href="#incarpi"><img src="images/incarpi.jpg" ><div class="portfoliotext">Raspberry Pi In-car computer</div></a></li>
...
继承我的职责:
function changeLayout() {
if ($('#changelayout').attr('data-icon') == 'grid'){
$('#changelayout').attr('data-icon', 'bars');
$('#changelayout .ui-icon').addClass('ui-icon-bars').removeClass('ui-icon-grid');
$('#changelayout').buttonMarkup('refresh');
$('#projects li img').width('100%');
$('#projects li').display('none');
$('.portfoliotext').show();
}
else {
$('#changelayout').attr('data-icon', 'grid');
$('#changelayout .ui-icon').addClass('ui-icon-grid').removeClass('ui-icon-bars');
$('#changelayout').buttonMarkup('refresh');
$('#projects li img').width('20%');
$('#projects li').margin('0');
$('#projects li').display('inline-block');
$('.portfoliotext').hide();
}
}
然而,元素仍然只是一个在另一个之上。我做错了什么?
由于
答案 0 :(得分:1)
工作示例:http://jsfiddle.net/Gajotres/PMrDn/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#changelayout', function(){
if ($('#changelayout').attr('data-icon') == 'grid'){
$('#changelayout').buttonMarkup({ icon: "bars" });
$( "#projects li" ).each(function( index ) {
$(this).width('100%');
$(this).css('float','clear');
$(this).find('.portfoliotext').css('display','none');
});
} else {
$('#changelayout').buttonMarkup({ icon: "grid" });
$( "#projects li" ).each(function( index ) {
$(this).width('20%');
$(this).css({'float':'left','margin':'0'});
$(this).find('.portfoliotext').css('display','block');
});
}
});
});
我希望就是这样。
答案 1 :(得分:0)
你试过这个吗?
$("#changelayout").attr('data-icon','bars').button().trigger("refresh");
或者你也可以这样做。
$("#changelayout").find(".ui-icon").removeClass("ui-icon-bars").addClass("ui-icon-grid");