$(this) 对象可以用来指向函数吗
我有一个代码如下:
function showHideOptions() {
$("#template1, #template2, #template3, #template4").css("display","none");
$(this).css("display","block");
}
我有四个选择下拉菜单,在特定时间我只想在模板选择器的选项上选择一个。
<select id="masterdropdown">
<option>T1</option>
<option>T2</option>
<option>T3</option>
<option>T4</option>
</select>
<select id="template1" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template2" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template3" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template4" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
CSS:
#template1, #template2, #template3, #template4{display:none;}
基本上我有一个顶部下拉菜单(masterdropdown),它始终可见,这也是一个模板选择器,在选择其选项时,我想显示与 masterdropdown 中所选选项相对应的特定模板下拉菜单。 jquery 中如何实现这一点?在这种情况下,从函数调用 $(this)
不起作用。
I have a code something below:
function showHideOptions() {
$("#template1, #template2, #template3, #template4").css("display","none");
$(this).css("display","block");
}
And I have four select dropdowns, At a particular time I want to select only one on the option of template selector.
<select id="masterdropdown">
<option>T1</option>
<option>T2</option>
<option>T3</option>
<option>T4</option>
</select>
<select id="template1" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template2" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template3" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
<select id="template4" onchange="return showHideOptions();">
<option>Template1</option>
<option>Template2</option>
<option>Template3</option>
<option>Template4</option>
</select>
CSS:
#template1, #template2, #template3, #template4{display:none;}
Basically I have a top dropdown(masterdropdown), which is always Visible this is also a template selector, On select of its options I want to show a particular template drodown that corresponds to that selected option in masterdropdown. How can this be acheived in jquery. does $(this)
not work in this case, being called from a function.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(3)
<script>
$(document).ready(function() {
$('#masterdropdown').showHideOptions().change();
});
$.fn.showHideOptions = function() {
this.change(function() {
$(".templateDropdowns").hide();
$('#' + $(this).val()).show();
});
return this;
};
</script>
<select id="masterdropdown">
<option value="template1">template1</option>
<option value="template2">template2</option>
<option value="template3">template3</option>
</select>
<select id="template1" class="templateDropdowns">
<option>ta</option>
<option>tat</option>
</select>
<select id="template2" class="templateDropdowns">
<option>ete</option>
<option>eTee</option>
</select>
<select id="template3" class="templateDropdowns">
<option>Te</option>
<option>Tet</option>
</select>
将更改事件处理程序附加到您的主下拉列表中。
在其中,只需检查选择的值,然后显示/隐藏相应的下拉列表。
像这样的东西(在javascript上有点生疏)
$("masterdropdown").change(function() {
$("#template1, #template2, #template3, #template4").hide(); var selText = $(this).search("选项:已选择").text(); if(selText == 'T1') $("#template1").show(); if(selText == 'T2') $("#template2").show(); if(selText == 'T3') $("#template3").show(); if(selText == 'T4') $("#template4").show();
});
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
查看有效的演示 http://jsfiddle.net/X5mWL/
JS
HTML
See a working Demo http://jsfiddle.net/X5mWL/
JS
HTML