javascript - 機能が重複していますが、どうすればそれらを組み合わせることができますか?

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 コード:

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

編集: カフェインを摂取した後、セットアップの問題に気付きました。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>

score 0 · Accepted Answer

関数を作成して関数を作成します。

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

命名規則を再考することで、おそらく物事をさらに単純化できます。

score 0 · Accepted Answer

単一の関数を定義することをお勧めします:

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

そして、それはトリックを行います。

score 0 · Accepted Answer

私はあなたのために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");
    });        
});

javascript - 機能が重複していますが、どうすればそれらを組み合わせることができますか?

5 に答える 5

Related

Reference