Question

我在我建立的新网站上使用了一些jQuery交互。唯一的问题是，我只知道它足够危险。有人可以帮我清理一下吗？工作得很好，我只是不想＆＃34;泼水＆＃34;像我一样进入dom。我确信这是完成同样事情的一种浓缩方式。＆＃34; .rotate＆＃34;函数实际上是调用一个旋转图像的插件，我后来以其他方式操作。感谢

(function($){})(window.jQuery);

$(document).ready(function (){
  $("#header").animate({ opacity: "1" }, 1000);

  $("#home_2").rotate(-10);
  $("#home_3").rotate(10);
  $("#home_4").rotate(20);
  $("#home_5").rotate(-20);

  var width = $(window).width();
  $("#home_5").animate({ left: 44 + '%', opacity: "1" }, 1000);
  $("#home_4").delay(2000).animate({ right: 44 + '%', opacity: "1" }, 1000);
  $("#home_2").delay(6000).animate({ left: 48 + '%', opacity: "1" }, 1000);
  $("#home_3").delay(4000).animate({ right: 48 + '%', opacity: "1" }, 1000);
  $("#home_1").delay(8000).animate({ top: 200 + 'px', opacity: "1" }, 1000);

  var loc = window.location.href;
    $("nav ul li a").each(function() {
      if(this.href == loc) {
         $(this).addClass('current');
      }
    });

  $("#home_5").click(function(e) {
    $(this).toggleClass('stack_top');
    $("#home_4,#home_3,#home_2,#home_1").removeClass('stack_top');
  });
  $("#home_4").click(function(e) {
    $(this).toggleClass('stack_top');
    $("#home_5,#home_3,#home_2,#home_1").removeClass('stack_top');
  });
  $("#home_3").click(function(e) {
    $(this).toggleClass('stack_top');
    $("#home_4,#home_5,#home_2,#home_1").removeClass('stack_top');
  });
  $("#home_2").click(function(e) {
    $(this).toggleClass('stack_top');
    $("#home_4,#home_3,#home_5,#home_1").removeClass('stack_top');
  });
  $("#home_1").click(function(e) {
    $(this).toggleClass('stack_top');
    $("#home_4,#home_3,#home_2,#home_5").removeClass('stack_top');
  });

});

Answer 1

这是一个使用类来表示相似元素的例子，可以节省大量的重复代码

/* adding the class would usually be done in your html markup but will add class dymamically here*/
$('#home_1, #home_2,  #home_3,  #home_4, #home_5').addClass('home_class')

/* one handler for all the elements in class*/
$('.home_class').click(function(e) {

    $('.stack_top').removeClass('stack_top');

    $(this).addClass('stack_top');
  });

Answer 2

或者您只需将所有商品保存在一个集合中并过滤掉它：

var home = $('#home_1, #home_2,  #home_3,  #home_4, #home_5');

home.click(function() {
    home.not(this).removeClass('stack_top');
    $(this).toggleClass('stack_top');
});

但您应该考虑使用css类。

一个小小的例子：http://jsfiddle.net/yF4gp/

jQuery交互需要Spring清理

2 个答案: