为什么在某些情况下选择铁页不起作用
Why in some case the selected of the iron-page doesn't work?
我做了一个函数来更改铁页中的"selected"属性并运行,但在某些情况下,"selected"属性返回最后一个值,给人一种不变的感觉。
元素
<template is="dom-bind" id="fulltemplate">
<div id="fullContainer" class="vertical layout flex" hidden>
<iron-pages id="pages" class="fancy flex center center-justified" selected="{{pageSelected}}" unresolve>
<div id="logincontainer" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox vertical layout" elevation="3">
<div class="hiddenof">
<h4 id="loginTitle"><iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{loginTitle}}</span></h4>
<h5 id="changePassword" hidden class="red">{{changePassword}}</h5>
<section>
<paper-input-container id="usernamedecorator">
<label>{{labuser}}</label>
<input id="usernameinput" pattern="[0-9]*" bind-value="{{valUsername}}" is="iron-input" onkeypress="keyPressLogin(event)" required>
<paper-input-error>{{errorInputUser}}</paper-input-error>
</paper-input-container>
<paper-input-container id="passworddecorator">
<label>{{labpass}}</label>
<input id="passwordinput" bind-value="{{valPassword}}" is="iron-input" maxlength='15' onkeypress="keyPressLogin(event)">
<paper-input-error>{{errorInputPass}}</paper-input-error>
</paper-input-container>
<paper-input-container id="confirmpassdecorator" hidden="true">
<label>{{labpass}}</label>
<input id="Text1" bind-value="{{valCPassword}}" is="iron-input" maxlength='15' onkeypress="keyPressLogin(event)">
<paper-input-error>{{errorInputPass}}</paper-input-error>
</paper-input-container>
</section>
<div id="bottomline" class="horizontal layout center">
<div class="clickable red medium flex" id="forgpassText" onclick="goto(1)">{{forgpassText}}</div>
<%--<paper-item class="clickable red medium flex" id="forgpassText" onclick="goto(1)">{{forgpassText}}</paper-item>--%>
<paper-spinner id="spinner" hidden></paper-spinner>
<paper-button id="loginButton" raised class="buttonNeutral" onclick="clickLogin(event);">{{btentrar}}</paper-button>
</div>
<paper-toast
id="errorToast"
duration="4000">
</paper-toast>
</div>
</paper-material>
</div>
<div id="passremcontainer" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox vertical layout" elevation="3">
<div class="hiddenof">
<div class="titbox justify">
<p id="rempassTit" class="big bold center">
<iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{rempassTit}}</span>
</p>
<p id="rempassSub" class="medium">{{rempassSub}}</p>
</div>
<div class="horizontal layout center-justified">
<section class="notoppadding">
<paper-input-container id="passreqdecorator">
<label>{{labemail}}</label>
<input id="passreqinput" bind-value="{{valmailpass}}" is="iron-input" onkeypress="keyPressLogin(event)">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
</section>
</div>
<div class="horizontal layout">
<div class="flex"></div>
<paper-button id="cancelPassB" raised class="buttonCancel" onclick="goto(0)">{{btcancelar}}</paper-button>
<paper-button id="acceptPassB" raised class="buttonNeutral" onclick="sendpassreq()">{{btenviar}}</paper-button>
<paper-spinner id="passspinner" hidden></paper-spinner>
</div>
<paper-toast
id="remToast"
duration="2000">
</paper-toast>
</div>
</paper-material>
</div>
<div id="masinfoDiv" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox bigboxshadow layout vertical" id="infoshadow" elevation="3">
<div id="infoDivScroll" class="hiddenof flex vertical layout">
<div class="titbox justify" class="bigboxshadow">
<p id="moreinfoTit" class="big bold center-text"><iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{moreinfoTit}}</span></p>
<p id="moreinfoSub" class="medium">{{moreinfoSub}}</p>
</div>
<div id="masinfoContent" class="flex horizontal layout center-justified redim">
<section class="notoppadding flex">
<paper-input-container id="nomapedeco">
<label>{{labnomape}}</label>
<input id="nomapeinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="empresadeco">
<label>{{labempresa}}</label>
<input id="empresainput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="actecodeco">
<label>{{labactecon}}</label>
<input id="actecoinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="tlfdeco">
<label>{{labtlf}}</label>
<input id="tlfinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="maildeco">
<label>{{labemail}}</label>
<input id="mailinput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
<paper-input-container id="consultadeco">
<label>{{labconsulta}}</label>
<input id="consultainput" is="iron-input">
<paper-input-error>{{fieldRequired}}</paper-input-error>
</paper-input-container>
</section>
</div>
<div class="horizontal layout" id="masinfoBotones">
<div class="horizontal end-justified layout flex">
<paper-button id="cancelInfoB" raised class="buttonCancel" onclick="goto(0)">{{btcancelar}}</paper-button>
<paper-button id="acceptInfoB" raised class="buttonNeutral" onclick="sendinforeq()">{{btenviar}}</paper-button>
</div>
<paper-spinner id="infospinner" hidden></paper-spinner>
</div>
<paper-toast
id="infoToast"
duration="4000">
</paper-toast>
</div>
</paper-material>
</div>
<div id="whatiscontainer" class="flex horizontal layout center center-justified">
<paper-material class="shadowbox layout vertical" id="whatischadow" elevation="3">
<div>
<div class="titbox justify">
<p id="whatistit" class="big bold center">
<iron-icon class="icnadviser" icon="iconnadviser"></iron-icon><span>{{whatis}}</span>
</p>
</div>
<div horizontal layout center-justified>
<section class="notoppadding">
<p class="medium">{{whatisContent}}</p>
</section>
</div>
</div>
</paper-material>
</div>
</iron-pages>
</div>
</template>
功能
function goto(i){
var maintemplate = document.querySelector('#fulltemplate');
if(i==0){
document.getElementById("pagesubtitle").removeAttribute("hidden");
document.getElementById("lefttopbar").removeAttribute("hidden");
document.querySelector("#iconinfo").removeAttribute("hidden");
maintemplate.pageTitle = "<%= Resources.GlobalResources.TITLE %>";
} else if(i==2){
maintemplate.pageTitle = "<%= Resources.GlobalResources.MASINFORMACION %>";
document.getElementById("pagesubtitle").setAttribute("hidden", true);
document.getElementById("lefttopbar").setAttribute("hidden", true);
document.querySelector("#iconinfo").setAttribute("hidden", true);
}
maintemplate.pageSelected = i;
}
有什么想法可以纠正这个问题吗?
谢谢你的时间。
你可以尝试使用
this.pageSelected
而不是使用主模板的属性,因为"this"指的是您的自定义元素。希望有帮助。
另一种选择是选择铁页元素并直接设置所选属性
this.$.pages.selected = i;
干杯
相关文章:
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 角度ng变化或ng点击选择can'不起作用
- <选择>标签不起作用
- 初始化ng模型时,Angular ui选择占位符不起作用
- 动态填充Bootstrap选择选择器:change event dos'不起作用
- Highcharts:树映射选择状态不起作用
- 单击选项卡时jquery选项卡选择不起作用
- jQuery日期选择器在Codeigniter和Bootsrap模式表单中不起作用
- JQuery日期选择器在IE 7上不起作用
- jQuery选择ajax调用中附加的元素不起作用
- 引导程序选择在jquery pep中不起作用
- 当我动态创建元素时,选择的插件不起作用
- 指令中选择输入的双向绑定不起作用
- 棱角分明的日期选择器;在ngDialog中不起作用
- Jquery悬停选择不起作用
- 选择选项淘汰赛事件不起作用
- ng-单击在IE中不起作用的选项选择Angularjs
- jQuery选择器在脚本中不起作用,但在控制台中工作
- 循环遍历类名索引不起作用..选择
- .trigger(' selected:updated')不起作用.选择v1.6.1