Question

我有两个div，我需要在点击时显示相反的内容。

您可以在此处查看我的意思：http://thomasbritton.co.uk/projects/akw/

基本上，当您单击1选项时，它会显示有关它的更多详细信息。

目前已经使用以下jQuery：

$('.consumer').live('click', function() {
    $(this).addClass('expanded');
    $(this).next().hide();
    $('.expanded h2').hide();
    $('.striped').hide();
    $('.expanded_content').fadeIn();
});

$('.trade').live('click', function() {
    $(this).addClass('expanded');
    $(this).prev().hide();
    $('.expanded h2').hide();
    $('.striped').hide();
    $('.expanded_content').fadeIn();
});

但我确信必须有一种方法可以将这两个函数合并为1，我只是无法弄清楚如何。

任何人都可以提供帮助吗？

由于

Answer 1

$('.consumer, .trade').live('click', function() {
  $(this).addClass('expanded');
  if ($(this).hasClass('consumer'))
    $(this).next().hide();
  else
    $(this).prev().hide();
  $('.expanded h2').hide();
  $('.striped').hide();
  $('.expanded_content').fadeIn();
});

Answer 2

$('.consumer,.trade').live('click', function() {
    $(this).addClass('expanded');
    if ($(this).is(".consumer"))
     $(this).prev().hide();
    if ($(this).is(".trade"))
     $(this).next().hide();
    $('.expanded h2').hide();
    $('.striped').hide();
    $('.expanded_content').fadeIn();
});

Answer 3

$('.consumer, .trade').live('click', function() {
    var $this = $(this).addClass('expanded');
    $this[$this.is('.consumer') ? "next" : "prev"]().hide();
    $('.expanded h2').hide();
    $('.striped').hide();
    $('.expanded_content').fadeIn();
});

Answer 4

$('.consumer, .trade').live('click', function() {
    $(this).addClass('expanded');
    $('.options:not(.expanded)').hide();
    $('.expanded h2').hide();
    $('.striped').hide();
    $('.expanded_content', $(this)).fadeIn();
});

如何将这两个功能合并为一个？

4 个答案: