JQuery: var(s) für drei Funktionen festgelegt

Question

Nach einer langen Suche habe ich nicht gefunden, wonach ich suche, oder wenn ich es gefunden habe, hat es nicht für das funktioniert, was ich mache, oder ich wusste nicht, wie ich es richtig benutzen sollte. In allen Fällen brauche ich wirklich Ihre Hilfe in dieser Angelegenheit.

Was ich gemacht habe, ist mein processing div zu definieren, indem ich nur das div(s) mit ID identifiziere, dann wird der Rest in jQuery geschrieben. Es gibt viel Code, also werde ich eine gekürzte Version hochladen.

HTML

    BLAU

    ROT

    GELB

jQuery

$(".processing").click(function () {
    var $this  = $(this);
    var ID     = $this.attr('id');

    switch(ID){
        case "blue":
            var name      = $this.find(".text").text();
            var width     = 60;
            // einige andere Variablen
        break;
        case "red":
            var name      = $this.find(".text").text();
            var width     = 40;
            // einige andere Variablen
        break;
        case "yellow":
            var name      = $this.find(".text").text();
            var width     = 20;
            // einige andere Variablen
        break;
    }
    $this.find(".text").text("DAS " + name);
    $this.find(".bar").css("width", width + "%");
    // einige andere komplizierte Codierung
});

Erklärung dessen, was der Code tut

Dies ist die einfache Version, das HTML für alle div(s) ist gleich, aber die IDs sind unterschiedlich und das text div auch. Sobald das div angeklickt wird, wird der Code die ID erhalten und dann mit der switch übereinstimmen, um die richtigen Variablen dafür zu erhalten (es gibt noch viel mehr Variablen als diese). Angenommen, das mit der ID blue markierte div wird angeklickt, wird die Breite des mit der Klasse bar markierten div innerhalb des blue auf 60% geändert gemäß der switch. Wenn auf rot geklickt wurde, wird die Balkenbreite für rot auf 40% geändert und so weiter.

Alle wichtigen Variablen sind innerhalb der click Funktion. Was ich möchte ist...

Was ich möchte

Vor dem Klicken möchte ich, dass der Benutzer mit der Maus über die Leiste fahren kann und neben dem Text wird das Prozentsatz erscheinen, ohne zu klicken, dann verschwindet es wieder, wenn die Maus weg ist.

Ich weiß, wie man das mit Funktionen macht, unter Verwendung von mouseenter und mouseleave.

Das Problem

das Problem ist... Ich müsste die Variablen 3 mal verwenden. Für mouseenter, mouseleave und für click. Wie könnte ich das machen oder was sollte ich mit den Variablen machen, damit ich sie in diesen drei Funktionen ohne Wiederholung verwenden kann.

Das processing div ist ein Rechteck,

das bar div ist der Hintergrund,

und das text div ist der Text über der Prozessleiste.

Bild zur Erklärung: https://i.sstatic.net/EOyoy.png

1 Erinnerung

In diesem Beispiel ist die var, die ich in allen Funktionen verwenden möchte, width. Aber im Code, den ich habe (Langversion), gibt es nicht nur eine Variable.

Answer 1

Warum deklarieren Sie nicht alle Variablen innerhalb eines Objekts:

var data = {
    blue: {
        width: 60,
        // andere Variablen
    },
    red: {
        width: 40,
        // andere Variablen
    },
    yellow: {
        width: 20,
        // andere Variablen
    }
}

Dann können Sie Ihr Datenobjekt überall verwenden, wo Sie es benötigen:

var ID = $this.attr('id');
var width = data[ID].width;

Answer 2

Die Antwort von Robby ist gut. Ich bin auch ein großer Fan des Datenattributes, um elementspezifische Dinge direkt in das Element einzubetten.

Ich verwende auch das Datenattribut, um das Element als angeklickt zu markieren, wenn es angeklickt wurde, damit mouseover und mouseleave danach suchen können und unterschiedliches Verhalten haben, wenn es bereits angeklickt wurde (falls überhaupt).

  BLAU

  ROT

  GELB

$(".processing").on("mouseover", function () {
   if( ! $(this).data("clicked")){
     //Wenn es noch nicht angeklickt wurde, etwas tun
   }else{
     //ansonsten, in Ruhe lassen
   }
});

$(".processing").on("mouseleave", function () {
  if( ! $(this).data("clicked")){
    //Wenn es bereits angeklickt wurde, in Ruhe lassen
  }else{
    //ansonsten, die Änderungen vom mouseover rückgängig machen
  }
});

$(".processing").on("click", function () {
  var name   = $(this).find(".text").text();
  var width = $(this).data("width");
  $(this).find(".text").text("DAS " + name);
  $(this).find(".bar").css("width", width + "%");
  $(this).data("clicked", true); //das div als angeklickt markieren
  // irgendein anderer komplizierter Code
});