$(this) 对象可以用来指向一个函数吗答案

【问题标题】：Can $(this ) object be used to point to a function$(this) 对象可以用来指向一个函数吗
【发布时间】：2011-10-19 05:08:42
【问题描述】：

我在下面有一段代码：

    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) 在这种情况下是否不起作用，从函数调用。

【问题讨论】：

hide() 和 show() 是你的朋友。

标签： jquery function this onchange function-parameter

【解决方案1】：

查看一个有效的演示 http://jsfiddle.net/X5mWL/

$(function(){
        $("#masterdropdown").change(function() {
            $("#template1, #template2, #template3, #template4").hide();
            $($("#masterdropdown").val()).show();
    });
});

HTML

 <select id="masterdropdown">
        <option value="#template1">T1</option>
        <option value="#template2">T2</option>
        <option value="#template3">T3</option>
        <option value="#template4">T4</option>
    </select> 


<select id="template1">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template2">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

<select id="template3">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template4">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select>

【讨论】：

你为什么在 jquery 中使用 nowrap(body)。与 Dom Ready 相比，它有何变化
它是为了让你之前的功能正常工作，如果你用我的方法，它就不再需要了。
顺便说一句，这与 onDomReady 有何不同，使用 $("document").ready(function() { //stuff here }) 有什么区别我可以使用 $(function() {}) 仅在我的页面中出现一次 $(function() { //stuff here })
$("document").ready(function() { //stuff here }) 和$(function() { //stuff here }) 是一样的，你可以多次使用它们，jQuery 结合了它们。 onDomReady 是一个 jsfiddle 东西，与 $(document).ready() 相同。 nowrap(body) 在正文中简单地打印 JS。
但是，我不能为我的选项提供后续下拉列表的 id 等值，是否有可能解决这个问题

【解决方案2】：

        <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>

【讨论】：

【解决方案3】：

将更改事件处理程序附加到您的主下拉列表。

在其中，只需检查选择值，并显示/隐藏相应的下拉菜单。

类似这样的东西（在 javascript 上有点生疏）

$("masterdropdown").change(function() {

$("#template1, #template2, #template3, #template4").hide();
var selText = $(this).search("option:selected").text();
if(selText == 'T1') $("#template1").show();
if(selText == 'T2') $("#template2").show();
if(selText == 'T3') $("#template3").show();
if(selText == 'T4') $("#template4").show();

});

【讨论】：