资源管理器不遵循 jquery 下的下拉列表选项链接
此列表中的第一个新成员。请原谅任何失礼行为...
这是 html...(Q1..不确定所选选项的语法,但这似乎有效...)
<select>
<option class=" " value="choose" selected="yes" SELECTED>choose language</option>
<option class=" turnoffbuttonenglish" value="japanese" >日本語 </option>
<option class=" turnoffbuttonjapanese" value="english" >English </option>
<option class="turnonboth" value="both" >both </option>
</select>
每个选项选择在页面和 iframe 中显示的语言。
这是 jquery 似乎不起作用(我认为问题出在这里,而不是我的代码中的其他地方......)
这三个选项有类似的代码部分。但下面是关掉按钮日语类的示例。 (名称是遗产,它确实显示英语..隐藏的类不显示...
$('.turnoffbuttonjapanese').click( function() {
$currentLanguage ="2"
$('.japanese').addClass("hidden");
$('.english').removeClass("hidden");
$currentIFrame.contents().find(".japanese").each(function(index, item) {
$(item).addClass("hidden");
});
$currentIFrame.contents().find(".english").each(function(index, item) {
$(item).removeClass("hidden");
});
});
这似乎在歌剧中有效,但在资源管理器中无效!!??? 当我选择时什么也不会发生。
如果我有
<div class=" english hidden turnoffbuttonenglish"> <a
class=" turnoffenglish" title="see 日本語 page">日本語 <img
src="images/chopsticks150.png" height="100%" alt="chopsticks"> </a></div>
<div class=" japanese turnoffbuttonjapanese"><a
class=" turnoffjapanese" title="see ENGLISH page">English <img
src="images/knifeandfork150.png" height="100%" alt="knife and fork"></a> </div>
这个作品......???
1st new to this list. please pardon any faux pas....
this is the html... (Q1..not sure of syntax for selected option but this seems to work...)
<select>
<option class=" " value="choose" selected="yes" SELECTED>choose language</option>
<option class=" turnoffbuttonenglish" value="japanese" >日本語 </option>
<option class=" turnoffbuttonjapanese" value="english" >English </option>
<option class="turnonboth" value="both" >both </option>
</select>
each option chooses which language to display in the page and an iframe.
here is the jquery that seems not to be working (I think the problem is here and not elsewhere in my code...)
there are analogous sections of code for the three options. but below is the exammple for class turnoffbuttonjapanese. (name is legacy, it really shows english..class hidden displays none...
$('.turnoffbuttonjapanese').click( function() {
$currentLanguage ="2"
$('.japanese').addClass("hidden");
$('.english').removeClass("hidden");
$currentIFrame.contents().find(".japanese").each(function(index, item) {
$(item).addClass("hidden");
});
$currentIFrame.contents().find(".english").each(function(index, item) {
$(item).removeClass("hidden");
});
});
This seems to work in opera, but not in explorer!!???
when I select nothing happens.
If instead I have
<div class=" english hidden turnoffbuttonenglish"> <a
class=" turnoffenglish" title="see 日本語 page">日本語 <img
src="images/chopsticks150.png" height="100%" alt="chopsticks"> </a></div>
<div class=" japanese turnoffbuttonjapanese"><a
class=" turnoffjapanese" title="see ENGLISH page">English <img
src="images/knifeandfork150.png" height="100%" alt="knife and fork"></a> </div>
this works...???
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
不要依赖
的
click
事件(如您所见,它不能跨浏览器工作),而是按值(并且如果可能的话,给第一个
您也可以稍微重新处理一下,不确定您的总体意图,例如您可以隐藏所有其中,然后显示您选择的值,而不是每个选项的
if
,从而使您的代码更短。Instead of relying on the
click
event of an<option>
(which won't work cross-browser as you're seeing), instead go by the value (and if possible, give that<select>
an ID to make it cleaner), like this:The reason the first
<select>
version isn't working is because not all browsers even fire thatclick
event on an<option>
, so your code never gets to run. Taking this approach will work and be more cross-browser stable. If you want an immediate effect on browsers that don't firechange
untilblur
occurs, you can run it a bit more often using.bind()
, just replace.change(function() {
with.bind('change click', function() {
.You can also re-work this a bit, not sure of your overall intentions, for example you can hide all of them, then show the value your selected, instead of an
if
for each option, making your code much shorter.