jQuery Schaltergehäuse Plugin?

Question

Ich weiß, dass der Schalter Case-Anweisung ist Javascript inhärenten und Sie können es nicht ändern. Ich lerne immer noch JavaScript und jQuery so kann ich durch, aber ich weiß nicht genug, um etwas zu schreiben, die auf der Ebene der jQuery selbst sein könnten. Also, nehmen Sie dies als eine Idee oder eine Frage nach, ob diese Idee machbar ist.

Das ist meine Idee, ein Schalter Case-Anweisung, die Objekte verwenden kann ..., die so etwas wie diese verwendet werden können:

switch( $(this) ){

 case .hasClass('foo'):
  // do something
  break;

 case .filter('.bar').attr('id') == 'foo':
  // do something else
  break;

}

---

Edit: Auch wie etwas, das wäre schön (möglicherweise eine vernünftige Idee) ...

switch ($(this).hasClass()) {

 case 'foo':
  alert('found a foo!');
  break;

 case 'bar':
  alert('found a bar!');
  break;

}

Answer 1

Oft schaltet sind nicht der beste Weg, um ein Problem zu lösen, aber mit jQuery Sie könnte ein Plugin machen, die so etwas wie eine switch-Anweisung funktioniert:

(function($) {
    $.fn.switchClasses = function(switches) {
        return this.each(function() {
            var that = this;
            $.each(this.attr("class").split(' '), function(i, class) {
                var func = switches[class];
                if(func)
                    func.apply(that, class);
            });
        });
    };
})(jQuery);

Sie würden das Plugin wie so verwenden:

$(this).switchClasses(
    {
        "class1":
        function(class) {
            // Do something for this class, 
            // the "this" variable is the jquery object that matched the class
        },

        "class2":
        function(class) {

        }
    }
);

Answer 2

Zunächst arbeitet der Switch-Anweisung nur auf int ist. Ich bin mir nicht sicher, warum sie Javascript um diese Einschränkung von C / C ++ gehalten, aber es ist da.

Mit verschachtelten if-then-else-Blöcke anstelle eines Schalters kann zu sehr unleserlich Code führen, wenn Sie mit mehr als eine Handvoll Optionen zu tun hat.

Aber genau wie in C und C ++ gibt es Workarounds, und dies beinhaltet „break“ wie eine goto verwenden, die nicht immer böse. Dies ist eine Situation (eine große Menge von verschachtelten if the anderes), wo ginge der Code effiziente und lesbar machen würde. In C / C ++ würden Sie implementieren dies mit goto des mit dem Etikett am Ende der Serie, wenn der seine (wobei das Ende des Schaltbügels ist jetzt), und fahren Sie in einen Schalter Kontext springen.

switch (1) { //yes, that is a hardcoded 1, we only want the switch block for the break keyword
    if (yourString == "Case 1") {
        do_stuff_1();
        break; // well, we're done, let's get out of here.
    }

//implicit else - if you matched the first one, you'd be out of here

    if (yourString == "Case 2") {
        do_stuff_2();
        break; // well, we're done, let's get out of here.
    }

    // etc.....

    default:
        do_error_condition();
} //end of switch

Answer 3

Was stimmt nicht mit einem normalen if/else?

inst = $(this);

if (inst.hasClass('foo')) {
    // do something
} else if (inst.filter('.bar').attr('id') == 'foo') {
    // do something else
}

Answer 4

Sie können auf element.attr('class') wechseln, wenn Sie mit einem Klassennamen zu tun haben.

Wenn Sie mit mehr als einem zu tun haben Sie können element.attr('class').split(/\s+/) tun und lassen für die Klassen-Namen in diesem Array.

Ich denke auch, möchten Sie vielleicht einen Blick auf .is() nehmen. Sie können Dinge wie if( element.is('a.foo') ) console.log( 'This is a link with a 'foo' class.' ); tun

Vielleicht mögen Sie Ihren Ansatz allerdings ändern. Ich kann nicht sehe dies der effizienteste Weg, um zu tun, was Sie versuchen zu tun.

Answer 5

    (function($) {
    $.fn.switchClasses = function(switches) {
        return this.each(function() {
            var that = this;
            $.each(this.attr("class").split(' '), function(i, classname) {
                var func = switches[classname];
                if(func){
                    func.apply(that, classname);
                }
            });
        });
    };
})(jQuery);

'Klasse' ist ein reservierter Name, und ich habe noch einige fehlende Klammer