Beratung Anleitung, wie dieses jQuery-Skript für show/hide Fade-Element

Question

Ich habe grundsätzlich mehrere Links auf der linken Seite des Bildschirms und auf der rechten Seite ist ein Vorschaufenster. Unterhalb des Vorschau-Fensters befindet sich eine weitere Box für den Affiliate-Link-Code. Also, was ich versuche, ein Affiliate-Seite zu tun ist, erstellen, wo Sie die Bannergröße auf der linken Seite auswählen, indem Sie auf den Link klicken und auf der rechten Seite Sie es dynamisch an die Bannergröße ändern zu sehen, und der Code ändert sich auch entsprechend. Bis jetzt habe ich den folgenden Code und es funktioniert, aber es scheint sehr sehr umständlich und aufgebläht. Kannst du sehen, ob ich das abbauen kann?

jQuery(".banner-style li").click(function() { 
    jQuery(".banner-style li").removeClass("selected"); 
    jQuery(this).addClass("selected"); 
    var $banner = jQuery(this).attr("class"); 
    $banner = $banner.replace(" selected",""); 
    jQuery(".preview img").fadeOut('fast',function() { 
         jQuery(".preview img").attr("src", 
         "http://localhost/site/banners/"+$banner+".jpg") 
         .fadeIn('slow'); 
      }); 
    jQuery(".code p").removeClass('hide').hide(); 
    jQuery(".code p."+$banner).show(); 
}); 

Auch das Komische ist, in FF zu beachten, wenn Sie für die zu auf einen Link klicken Sie zuerst auf, blendet das Originalbild auf der rechten Seite und in ganz schnell und dann lädt er das Bild „geklickt“. Dies geschieht nicht in anderen Browsern ...

Answer 1

Sie ändern könnte:

jQuery(this).addClass("selected"); 
var $banner = jQuery(this).attr("class"); 
$banner = $banner.replace(" selected",""); 

in:

var $banner = jQuery(this).attr("class"); 
jQuery(this).addClass("selected"); 

durch die Zeilenfolge zu ändern und das Entfernen einer Zeile $banner erstellt unmittelbar nach der Zugabe "ausgewählte" Klasse und Sie vermeiden eine Zeile.

in dieser Reihe wählen Sie, was bereits ausgewählt ist:

jQuery(".preview img").fadeOut('fast',function() { 
    jQuery(".preview img").attr("src", 
    "http://localhost/site/banners/"+$banner+".jpg") 
    .fadeIn('slow'); 
}); 

vielleicht besser als:

jQuery(".preview img").fadeOut('fast',function() { 
    jQuery(this).attr("src", 
    "http://localhost/site/banners/"+$banner+".jpg") 
    .fadeIn('slow'); 
}); 

überarbeitet:

jQuery(".banner-style li").click(function() { 
    jQuery(".banner-style li").removeClass("selected"); 
    var $banner = jQuery(this).attr("class"); 
    jQuery(this).addClass("selected"); 
    jQuery(".preview img").fadeOut('fast',function() { 
     jQuery(this).attr("src", 
     "http://localhost/site/banners/"+$banner+".jpg") 
     .fadeIn('slow'); 
    }); 
    jQuery(".code p").removeClass('hide').hide(); 
    jQuery(".code p."+$banner).show(); 
}); 

EDIT: mit FF zu Ihrem Problem Hinweis, würde das Markup Css sehen müssen, aber diese Zeile scheint mir "seltsam":

jQuery(".code p").removeClass('hide').hide();