Question

我正在尝试简化我的代码，但我不知道如何正确地执行此操作。正如你在下面看到的，我的函数声明对于所有3都是相同的但是，我为每个都做了。看起来我应该能够在它们变得太多之前对它做些什么，但我不太确定如何做到这一点。

function idone() {
  $('#id1').on('click', function () {
    var newclass = $(".f1").attr("class");
    var oldclass = $("#photo").attr("class");
    $("#photo").fadeOut(function() {
      $("#photo").removeClass(oldclass).addClass(newclass).fadeIn('slow');
    });
  });
}

function idtwo() {
  $('#id2').on('click', function () {
    var newclass = $(".f2").attr("class");
    var oldclass = $("#photo").attr("class");
    $("#photo").fadeOut(function() {
      $("#photo").removeClass(oldclass).addClass(newclass).fadeIn('slow');
    });
  });
}

function idthree() {
  $('#id3').on('click', function () {
    var newclass = $(".f3").attr("class");
    var oldclass = $("#photo").attr("class");
    $("#photo").fadeOut(function() {
      $("#photo").removeClass(oldclass).addClass(newclass).fadeIn('slow');
    });
  });
}

Answer 1

function id(number) {
  $('#id' + number).on('click', function () {
    var newclass = $(".f" + number).attr("class");
    var oldclass = $("#photo").attr("class");
    $("#photo").fadeOut(function() {
      $("#photo").removeClass(oldclass).addClass(newclass).fadeIn('slow');
    });
  });
}

然后使用id(number);

进行调用

Answer 2

使用ids，也可以在元素上添加一个类：

<div class="divs" id="id1"></div>
<div class="divs" id="id2"></div>

并在f1类元素上添加id，假设它们是span：

<span class="fid1"></span>

然后像这样编写jquery：

$('.divs').on('click', function () {
    var newclass = $('.f'+this.id).attr("class");
    var oldclass = $("#photo").attr("class");
    $("#photo").fadeOut(function() {
      $("#photo").removeClass(oldclass).addClass(newclass).fadeIn('slow');
    });
  });

Answer 3

你可以做什么：

$('[id^=id]').on('click', function () {
    var classToToggle = $(".f"+this.id.replace(/[^\d]/g,'')).attr("class") + ' ' + $("#photo").attr("class");
    $("#photo").fadeOut(function() {
        $("#photo").toggleClass(classToToggle).fadeIn('slow');
    });
});

简化我的JQuery代码

3 个答案: