Посоветуйте руководство по формированию этого скрипта jQuery для элемента show / hide fade - PullRequest
Новая
       5

Посоветуйте руководство по формированию этого скрипта jQuery для элемента show / hide fade

0 голосов
/ 27 декабря 2010

У меня в основном несколько ссылок на левой стороне экрана, а справа - окно предварительного просмотра.Под окном предварительного просмотра находится еще одно поле для кода партнерской ссылки.Поэтому я пытаюсь создать партнерскую страницу, где вы выбираете размер баннера слева, нажимая на ссылку, а справа вы видите, что он динамически меняется на размер баннера, и код также изменяется соответствующим образом.Пока у меня есть следующий код, и он работает, но он кажется очень громоздким и раздутым.Можете ли вы посмотреть, смогу ли я урезать это? 

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, когда вы нажимаете для первой ссылки на любую ссылку, исходное изображение справа исчезает иочень быстро, а затем он загружает «нажал» изображение.Это не происходит в других браузерах ...

1 Ответ

0 голосов
/ 27 декабря 2010

вы можете изменить: 

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

на: 

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

, изменив последовательность строк и удалив одну строку $banner создается сразу после добавления класса «selected» ивы избегаете одной строки.

в этом наборе вы выбираете то, что уже выбрано: 

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