Каков наилучший способ переопределения функции .toggle () в jquery?

Question

Я хочу изменить функцию переключения, чтобы она изменила текст ссылки на «показать / скрыть» или «развернуть / свернуть».

Определение функции и вызов в классическом JS будут:

function myToggle(expandText, collapseText, id,o){
   // expandText: "expand", "show", "display"
   // collapseText: "collapse", "hide"
   // id: the id of the div to toggle
   // o: the object from where the function has been called
}

Я бы тогда назвал это так:

<a href="#" onclick="myToggle('Show','Hide', 'myId', this); return false;">Show the div</a>
<div id='myId'>Hi!</div>

Было бы заменить строку «Показать» на «Скрыть» и показать () div. Повторное нажатие вернет вас к предыдущему состоянию. Довольно простые вещи, это не проблема.

---

Я новичок в jquery, но мне это уже нравится. Я знаю, что есть чистый способ создать что-то подобное, но я не уверен, как его использовать ...

Итак, вопрос: Как бы вы определили и вызвали такую ​​функцию? Какой самый лучший и чистый способ сделать это (я должен изменить тумблер jquery, создать свой собственный ...)?

Будем благодарны за любые указатели или чтение (нет книг, пожалуйста, мне все еще нужно сделать это сегодня :)). Вам не нужно на самом деле писать тело функции, чтобы быть принятым.

Answer 1

Вы можете написать свой собственный плагин .

jQuery.fn.myToggle = function( show, hide, id) {
    return this.each( function() {
        var $href = $(this);
        $href.click( function(evt) {
            var text = $href.text();
            if (text.indexOf(show) > -1) {
                $href.html( text.replace(show,hide) );
            }
            else {
                $href.html( text.replace(hide,show) );      
            }
            $("#" + id).toggle();
            evt.preventDefault();


        });

    });
};



 $('#clicky').myToggle( 'show','hide','myId');