Question

我有一个函数，除了更改类名外，它几乎保持不变。我希望能让代码减少文字重量。我怎么能把它变成一个小函数而不是重复它 n次。我关心的是删除被点击的最后一个li的活动类。我这里只提供了2个实例，但是这段代码重复 n 次。任何想法都会非常感激。

        $('a.app1-preview').click(function() {
            //remove last active classes
                    $(".app2").removeClass('active');
                    $(".app2-preview").removeClass('active');
                    //Add active class for this 
            $(this).parent().addClass('active');
            $(this).addClass('active');
            $('.app-preview-2').fadeOut("slow", function () {
                $('.app-preview-1').fadeIn("slow");

            });        
        });

        $('a.app2-preview').click(function() {
            //remove last active classes
                    $(".app1").removeClass('active');
                    $(".app1-preview").removeClass('active');
                    //Add active class for this 
                    $(this).parent().addClass('active');
            $(this).addClass('active');
            $('.app-preview-1').fadeOut("slow", function () {
                $('.app-preview-2').fadeIn("slow");
            });        
        });

HTML code：

 <div class="app-container">
                <ul class="apps">
                  <li class="app1"> 
                      <a title href="#" class="app1-preview blocklink">
                            <span>ANOTHER<br /> APP</span>
                      </a> 
                  </li>
                  <li class="app2"> 
                      <a title href="#" class="app2-preview blocklink">
                            <span>SECOND<br /> APP</span>
                      </a> 
                  </li>
</div>

Answer 1

编辑：在我喝了一些咖啡因之后，我注意到了设置的问题。我在JSFiddle创建了一个演示版。标记将显示应用程序的“标题”，该标题将在单击时显示子描述，并隐藏其他同级描述的描述。

在这种情况下，您可以显示当前元素，并隐藏兄弟姐妹，这将是一个更清晰的解决方案，因为它可以在更多的app元素上进行扩展。

$(".app").click(function() {
  var $self = $(this);
  var $apps = $self.closest(".apps");
  var $selfSiblings = $apps.children(".app").not($self);

  $self.addClass(".active");
  $self.find(".app-preview").addClass("active");  

  $selfSiblings.removeClass(".active");
    $selfSiblings.find(".app-preview").removeClass("active").fadeOut("slow", function() {
      $self.find(".app-preview").fadeIn("slow");
    });
});

我还建议您重写HTML：

<div class="app-container">
  <ul class="apps">
    <li class="app"> 
      App 1<br />
      <a title href="#" class="app-preview blocklink">
        <span>PREVIEW 1</span>
      </a> 
    </li>
    <li class="app"> 
      App 2<br />
      <a title href="#" class="app-preview blocklink">
        <span>PREVIEW 2</span>
      </a>
   </li>
      <li class="app"> 
      App 3<br />
      <a title href="#" class="app-preview blocklink">
        <span>PREVIEW 3</span>
      </a>
   </li>
</div>

Answer 2

尝试利用您拥有 .active 类的事实。 ;）预览 - http://jsfiddle.net/evSqF/1/

JS：

<script>
    $('a.blocklink').click(function() {
        var self = $(this);

        $('.active').fadeOut('slow', function(){
            $(this).removeClass('active');

            self.fadeIn('slow');
            self.addClass('active');
        });
    });
</script>

HTML：

<div class="app-container">
    <ul class="apps">
        <li class="app1">
            <a title href="#" class="app1-preview blocklink">
                <span>ANOTHER<br /> APP</span>
            </a>
            <div class="app-preview active">App1 preview</div>
        </li>
        <li class="app2"> 
            <a title href="#" class="app2-preview blocklink">
                <span>SECOND<br /> APP</span>
            </a>
            <div class="app-preview">App2 preview</div>
        </li>
    </ul>
</div>

Answer 3

编写一个函数来为您创建函数：

function makeHandler(deactivate, fadeOut, fadeIn) {
  return function() {
        //remove last active classes
        $(deactivate).removeClass('active');

                //Add active class for this 
        $(this).parent().addClass('active');
        $(this).addClass('active');
        $(fadeOut).fadeOut("slow", function () {
            $(fadeIn).fadeIn("slow");

        });        
    });

然后：

$('a.app1-preview').click(makeHandler('.app2, .app2-preview', '.app-preview-2', '.app-preview-1'));
$('a.app2-preview').click(makeHandler('.app1, .app1-preview', '.app-preview-1', '.app-preview-2'));

你可以通过重新思考你已经拥有的命名约定来进一步简化事情。

Answer 4

我建议定义一个函数：

function single(index_main, index_aux) {
  // Does all your magic
}

$('a.app1-preview').click(function() {
  single("1", "2");
});

$('a.app2-preview').click(function() {
  single("2", "1");
});

这就是诀窍。

Answer 5

我为你做了一个jsfiddle例子。看看它在这里，它使用尽可能多的代码，所以没有任何令你惊讶的东西会在那里：）

http://jsfiddle.net/2ZPxx/

基本上我最终得到了这个HTML：

<div class="app-container">
    <ul class="apps">
      <li class="app1">
          <a title href="#" class="app1-preview blocklink" id="app1">
                <span>ANOTHER<br /> APP</span>
          </a>
      </li>
      <li class="app2">
          <a title href="#" class="app2-preview blocklink" id="app2">
                <span>SECOND<br /> APP</span>
          </a>
      </li>
</div>
<div class="app-preview-app1 app-preview">App1 preview</div>
<div class="app-preview-app2 app-preview">App2 preview</div>

这个javascript：

$('.apps li a').click(function() {
    var id = $(this).attr('id');
    $('.apps li').removeClass('active');

    //Add active class for this
    $(this).parent().addClass('active');
    $(this).addClass('active');
    $('.app-preview').fadeOut("slow", function () {
        $('.app-preview-'+id).fadeIn("slow");
    });        
});

重复的功能，我怎么组合它们？

5 个答案: