JQuery/JavaScript - 訪問方法

我是JavaScript編程的新手，我不懂方法訪問。我有一些代碼，看起來像下面這樣：JQuery/JavaScript - 訪問方法

(function ($) { 
    $.fn.myCustomUIElement = function (options) { 
     var props = { value: 1 }; 

     return this.each(function() { initialize(); }); 
     function initialize() { /* initialization code */ } 

     function toggle() { if (props.value == 1) { props.value = 0; } else { props.value = 1; } } 
    }; 
})(jQuery);

我的HTML頁面有一個錨標記，負責切換myCustomUIElement的狀態。顯示這並初始化myCustomUIElement的HTML如下所示：

<div id="myElement"></div>   
<a href="#" onclick="toggleFromHtml('myElement');">toggle</a> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myElement").myCustomUIElement(); 
    }); 

    function toggleFromHtml(e) { 
     $("#" + e).toggle(); 
    } 
</script>

我的問題是，在myCustomUIElement對象的切換方法不會被調用。我可以調用toggleFromHtml就好了。如何訪問JavaScript中定義的方法，如上所示？有沒有辦法？請注意，如果可能，我不想重寫第一段中顯示的JavaScript。如果可能，我想從toggleFromHtml方法調用該方法。

謝謝！

來源

2010-06-23 user336786

我會繼續看着這個，我想我最初誤解了你的問題，但基本上這個我創建一個jQuery插件。 – cgp 2010-06-23 13:52:15

.toggle（）;是您的插件代碼中的私有方法。你需要做一些像$ .fn.toggle（）= function（options）{/ * dostuff * /}這樣的東西來以你想要的方式訪問它。另外，我相信切換已經是JQuery中的一種方法;你可能會想把它命名爲別的東西。你也可以以$ .fn.mycustomUIElement.toggle = function（）{}和$（'selector'）的形式訪問它。@CycleMyCustomUIElement.toggle（） – Mervyn 2010-06-23 14:23:48

@mervyn問題是，我無法訪問新的道具屬性方法命名爲$ .fn.myFunction = function（）{}。這是我的問題源於的地方。但我不知道如何克服它。 – user336786 2010-06-23 17:59:43

我認爲你有一個插件的開始那裏，你需要擴展jQuery對象。下面是一個例子，通知$.fn.extend({})myCustomUIElement()將是你的方法名

的jQuery插件

(function($){ 
$.fn.extend({ 
    myCustomUIElement: function(options){ 
     return this.each(function(){ 
      new $.MyCustomUIElement(this, options); 
     }); 
    } 
}); 

$.MyCustomUIElement = function(target, options){ 
    var $target = $(target); 

    $target.bind('click', {}, function(e){ 
     e.preventDefault(); 

     // your event code 
     alert(options.myVar + ' ' + $(this).text()); 
    }); 
}; 
})(jQuery);

你的初始化JavaScript的

$(document).ready(function(){ 
    $('#wrap .myElement').myCustomUIElement({ 
     myVar: 'click me!' 
    }); 
});

和HTML

<div id="wrap"> 
    <a class="myElement" href="#">toggle 1</a> 
    <a class="myElement" href="#">toggle 2</a> 
</div>

來源

2010-06-23 20:31:50 gawpertron

JQuery/JavaScript - 訪問方法

回答

相關問題