2

除了更改类名外，我有一个几乎保持不变的函数。我希望使代码的文本少一点。我怎样才能让它只是一个小功能而不是重复它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 代码：

 <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>
4

5 回答 5

1

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

在这种情况下，您可以显示当前元素，并隐藏同级元素，这将是一个更简洁的解决方案，因为它会随着您在更多应用程序元素上进行缩放。

$(".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>​
于 2012-06-18T11:43:23.817 回答
1

尝试利用您拥有.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>
于 2012-06-18T11:49:05.643 回答
0

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

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'));

您可能可以通过重新考虑您拥有的命名约定来进一步简化事情。

于 2012-06-18T11:35:17.067 回答
0

我建议定义一个函数：

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");
});

这就是诀窍。

于 2012-06-18T11:37:05.390 回答
0

我为你做了一个 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");
    });        
});
于 2012-06-18T11:41:26.847 回答