建议如何形成此jQuery脚本以显示/隐藏淡入淡出元素的指南

Question

我基本上在屏幕的左边有几个链接，右边是一个预览窗口。预览窗口下方是用于代销商链接代码的另一个框。所以我正在尝试做的是创建一个联属页面，在那里您可以通过单击链接在左侧选择横幅大小，在右侧您可以看到它动态地更改为横幅大小，代码也会相应地更改。到目前为止，我有以下代码，它可以工作，但它似乎非常繁琐和臃肿。你能看看我能不能把这个修剪一下？

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();
});

另外，有趣的是，在FF中，当你点击任何链接的第一个to时，右边的原始图像会很快淡出和淡入，然后它会加载“点击”的图像。这在其他浏览器中不会发生...

Answer 1

你可以改变：

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

进入：

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

通过改变行的顺序并删除一行，在添加"selected“类之后就会创建$banner，这样就避免了一行。

在此集合中，您可以选择已经选择的内容：

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

也许更好的方法是：

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

修改后的：

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();
});

编辑:关于FF的问题，我必须看到标记Css，但这一行对我来说似乎“奇怪”：

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