Как улучшить этот метод переключения jQuery

Я пытаюсь изучить jquery, у меня есть некоторые основы javascript.Как улучшить этот метод переключения jQuery

Я написал этот кусок кода для переключения между 3 функции, он отлично работает

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
</head> 

<style type="text/css"> 
    .format1{ 
     background: red; 
    } 
    .format2{ 
     background: yellow; 
    } 
    .format3{ 
     background: blue; 
    } 
</style> 

<div id="div-toggle">Click here to toggle</div> 

<script language="javascript"> 
    var click = 0; 
    $('#div-toggle').toggle(
     function(){ 
      var el = $('#div-toggle'); 
      el.addClass('format1'); 

      el.html('No. of clicks: ' + click++); 
     }, 
     function(){ 
      var el = $('#div-toggle'); 
      el.removeClass('format1'); 
      el.addClass('format2'); 

      el.html('No. of clicks: ' + click++); 
     }, 
     function(){ 
      var el = $('#div-toggle'); 
      el.removeClass('format2'); 
      el.addClass('format3'); 

      el.html('No. of clicks: ' + click++); 
     } 
    ); 
</script> 
</html>

Вот если вы видите содержимое всех функций в тумблер аналогично. Как я могу улучшить это, перемещая этот код для использования одной функции?

источник

2009-08-28 Anonymous

Напишите функцию для создания обратных вызовов:

var click = 0; // keep track of how many times user has clicked 

// Generates an event handler that will remove oldClass, add newClass, increment 
// click, and update the element text whenever it is called. 
function ClassSwapper(oldClass, newClass) 
{ 
    return function() 
    { 
    $(this) 
     .removeClass(oldClass) 
     .addClass(newClass) 
     .html('No. of clicks: ' + ++click); 

    }; 
} 

// generate three event handlers for toggle, such that the three 
// format classes are cycled. 
$('#div-toggle').toggle(
    ClassSwapper('format3', 'format1'), 
    ClassSwapper('format1', 'format2'), 
    ClassSwapper('format2', 'format3') 
);

Обратите внимание, что toggle() вращает обработчик от последнего во-первых, поэтому вы, вероятно, хотите, чтобы ваш первый обработчик удалил класс add ред последней ...

Поскольку вы держать счетчик, вы могли бы просто избежать toggle() полностью, и объединить счетчик, список классов, чтобы перебрать и обработчик событий в click:

// number of times user has clicked, and also index of *next* class to use 
var click = 0; 
$("#div-toggle").click(function() 
{ 
    // classes to cycle through 
    var classes = ['format1', 'format2', 'format3']; 

    // removes previous class, adds new one. 
    // note that, for brevity, this takes advantage of 
    // a detail specific to JavaScript arrays: negative indexes are 
    // interpreted as property names, so the first time this is called, 
    // removeClass() will be passed the value of classes["-1"] (which will 
    // return undefined) and will as a result do nothing. 
    $(this) 
    .removeClass(classes[(click-1)%classes.length]) 
    .addClass(classes[(click)%classes.length]) 
    .html('No. of clicks: ' + ++click); 
});

источник

2009-08-28 16:25:07 Shog9

Я думаю, вам нужно пройти через закрытие javascript.

Использование закрытие JavaScript У Javascript может быть переписано как

<script language="javascript"> 
    var click = 0; 
    $('#div-toggle').toggle(
     toggle('format1'), 
     toggle('format2', 'format1'), 
     toggle('format3', 'format2') 
    ); 

    function toggle(add, remove){ 
     return function(){ 
      var el = $('#div-toggle'); 
      if(remove){ 
       el.removeClass(remove); 
      } 
      el.addClass(add); 

      el.html('No. of clicks: ' + click++); 
     } 
    } 
</script>

Я надеюсь, что это решит вашу проблему.

Вы можете использовать некоторые из этих ресурсов, чтобы узнать о замыканиях
http://www.jibbering.com/faq/faq_notes/closures.html
http://www.javascriptkit.com/javatutors/closures.shtml
http://ejohn.org/apps/learn/#48

источник

2009-08-28 16:20:21

Как улучшить этот метод переключения jQuery

ответ

Смежные вопросы