All geek questions in one place

How to improve this jQuery switch method

I am trying to learn jquery, I have some basics of javascript.

I wrote this code snippet to switch between 3 functions, it works great

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

Here, if you see that all the functions in the switch are similar. How can I improve this by moving this code to use a single function?

+3
source share
2 answers

Write a function to generate callbacks:

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')
  );

Note that it toggle()rotates the handlers from the last back to the first, so you probably want your first handler to delete the class the last added ...

, 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);
});
+6

, 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

+1

Source: https://habr.com/ru/post/1716329/

More articles:


All Articles