このjQueryスクリプトのサイズを縮小してより柔軟にする方法

Question

HTMLのブロックを表示/非表示（トグル）するスクリプトを作成しました。それぞれがHTMLブロックを切り替えることができる4つのボタンがあります。任意のHTMLブロックが開かれているにもかかわらず、ユーザーがそのHTMLブロックの関連ボタン以外のボタンをクリックした場合、そのHTMLブロックが隠され、新しいブロックが表示されます。ここで

は私が現時点で持っているものです。

$('.btn_add_event').click(function() { 

    $('.block_link, .block_photos, .block_videos').hide(); 
    $('.block_event').toggle(); 

}); 

$('.btn_add_link').click(function() { 

    $('.block_event, .block_photos, .block_videos').hide(); 
    $('.block_link').toggle(); 

}); 

$('.btn_add_photos').click(function() { 

    $('.block_event, .block_link, .block_videos').hide(); 
    $('.block_photos').toggle(); 

}); 

$('.btn_add_videos').click(function() { 

    $('.block_event, .block_link, .block_photos').hide(); 
    $('.block_videos').toggle(); 

}); 

すべてのアイデアは、コードサイズを小さくする方法？また、このスクリプトは非常に柔軟性がありません。 2つの新しいボタンとブロックを追加すると想像してください。

Answer 1

Samのように、私はすべてのブロックが共有するクラスを使用するので、そのコードを変更する必要はありません。第二に、最も近いブロックに「移動」することができます。そのため、名前を避けます。そのアプローチは、各特定のブロックをハードコーディングするよりも優れていますが、html domツリーが変更された場合は、リファクタリングする必要があります。最後に、しかし、あなたはクラス名を目的のブロックに変数として関数に渡すことができます。以下は、あなたが始めたものに近いペーストをコピーできるものです。

$('.myAddButtonClass').click(function() { 

    $('.mySharedBlockClass').filter(':visible').hide(); 
//find a good way to 'traverse' to your desired block, or name it specifically for now. 
//$(this).closest(".mySharedBlockClass").show() complete guess 
    $('.specificBlockClass').show(); 
}); 

Answer 2

「HTMLブロックが開かれたときに、そのHTMLブロックの関連ボタン以外のボタンをユーザーがクリックした」と読んだままで、私の目が失敗したと思った。

もっと動的にしたい場合は、共通のクラスキーワードを追加することができます。その後、クリックイベントが発生すると になります。 というキーワードを持つすべてのクラスをループして、すべてのクラスを非表示にしてから（現在のものを除く）、 'this'キーワードを使用して現在のものを表示することができます。あなたは下のリンクを参照することができます

Answer 3

、

http://chandreshmaheshwari.wordpress.com/2011/05/24/show-hide-div-content-using-jquery/

コールfunction showSlidingDiv()のonclickイベントとは、動的にボタンクラスを渡します。

これは役に立ちます。

ありがとうございました。

Answer 4

は、残念ながら、私はそれをテストすることができませんでしたが、私は右の次のことを覚えている場合は動作するはずです。この

$('input[type=button]').click(function() { 
     $('div[class^=block]').hide(); // I resumed html block is div 
     $(this).toggle(); 
}); 

Answer 5

を試してみてください。

function toogleFunc(clickObject, toogleTarget, hideTarget) 
{ 
    $(clickObject).click(function() 
    { 
    $(hideTarget).hide(); 
    $(toogleTarget).toggle(); 
    }); 
} 

そしてコール：

toogleFunc(
    ".btn_add_videos", 
    ".block_videos", 
    ".block_event, .block_link, .block_photos" 
); 

とこれまでの

Answer 6

ボタンにはそれぞれ1つのクラスしかないと仮定すると、このようなものが動作するはずです。

var classNames = [ 'btn_add_event', 'block_link', 'block_photos', 'block_videos' ]; 

var all = '.' + classNames.join(', .'); // generate a jquery format string for selection 

$(all).click(function() { 

    var j = classNames.length; 

    while(j--){ 
    if(this.className === classNames[j]){ 

     var others = classNames.splice(j, 1); // should leave all classes but the one on this button 

     $('.' + others.join(', .')).hide(); 
     $('.' + classNames[j]).toggle(); 

    } 
    } 
} 

すべてのボタンには同じハンドラがあります。ハンドラが起動すると、送信者はリスト内のクラスの1つをチェックします。クラスが見つかった場合は、残りのクラスからjquery選択文字列を生成して非表示にし、見つかったものをトグルします。文字列が正しく生成されていることを確認するためにいくつかのチェックが必要な場合があります。

Answer 7

これは、HTMLの構造によって異なります。あなたはあなたが送信者とターゲットが共有するクラスを持っている

このような

<div class="area"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
</div> 
... 
<div class="sender"> 
    <a class="one"></a> 
    <a class="two"></a> 
    <a class="three"></a> 
</div> 

何かをしたと仮定すると

。

あなたのjsがこのようになります：

$('.sender > a').click(function() { 
    var target = $(this).attr('class'); 
    $('.area > .' + target).show().siblings().hide(); 
}); 

あなたはあなたの本当のターゲットを表示し、必要のない兄弟を、非表示にします。

Answer 8

クラスポストフィックスを配列に入れると、このコードを簡単に動的にすることができます。このコードでは、トグルまたは非表示の順番は関係ありません。それが問題であれば、（内部）ループの内部で正しいクラス名を覚えて、ループの後でそのクラスを切り替えることができます。

このアプローチの利点は、残りのコードを変更することなく、エクストラクラスで配列を拡張できることです。

var classes = new Array('videos', 'event', 'link', 'photos'); 

for (var i = 0; i < classes.length; ++i) 
{ 
    $('.btn_add_' + classes[i]).click( 
    function() 
    { 
     for (var j = 0; j < classes.length; ++j) 
     { 
      if (this.hasClass('btn_add_' + classes[j])) 
      { 
       $('.block_' + classes[j]).toggle(); 
      } 
      else 
      { 
       $('.block_' + classes[j]).hide(); 
      } 
     } 

    }); 
} 

あなたはbtn_add_eventのようなこれらの要素のクラスを割り当てないことで、このコードは、よりエレガントに、しかし、彼らに二つのクラス与えることができる：btn_addとeventを、あるいはそれらにidを与えることに頼ります。私の解決策はあなたの現在のHTMLのあなたの記述に基づいています。

Answer 9

ここで私は素晴らしい柔軟性とパフォーマンスの機能があると思います。それはあなたのリンクとhtmlブロックを親に含めることができると仮定しますが、それ以外の場合はクロージャを使用して要素を事前に計算しますので、クリックは超高速です。

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script> 

<script type="text/javascript"> 

    // Enables show/hide functionality on click. 
    // The elements within 'container' matching the selector 'blocks' are hidden 
    // When elements within 'container' matching the selector 'clicker' are clicked 
    // their attribute with the name 'clickerAttr' is appended to the selector 
    // 'subject' to identify a target, usually one of the 'blocks'. All blocks 
    // except the target are hidden. The target is shown. 
    // 
    // Change clickerAttr from 'linkTarget' to 'id' if you want XHTML compliance 
    // 
    // container: grouping of related elements for which to enable this functionality 
    // clicker: selector to element type that when clicked triggers the show/hide functionality 
    // clickerAttr: name of the DOM attribute that will be used to adapt the 'subject' selector 
    // blocks: selector to the html blocks that will be shown or hidden when the clicker is clicked 
    // subject: root of the selector to be used to identify the one html block to be shown 
    // 
    function initToggle(container,clicker,clickerAttr,blocks,subject) { 

    $(container).each(
     function(idx,instance) { 
      var containerElement = $(instance); 
      var containedBlocks = containerElement.find(blocks);  

      containerElement.find(clicker).each(function(idxC, instanceClicker) { 

       var tgtE = containerElement.find(subject+instanceClicker.getAttribute(clickerAttr)); 
       var clickerBlocks = containedBlocks.not(tgtE); 

       $(instanceClicker).click(function(event) { 
        clickerBlocks.hide(); 
        tgtE.toggle(); 
       }); 
      }); 

      // initially cleared 
      containedBlocks.hide(); 
     } 
    ); 
    } 

    $(function() { 

    initToggle('.toggle','a.link','linkTarget','div.block','div.'); 

    }); 
</script> 

</head> 
<body> 

Example HTML block toggle: 

<div class="toggle"> 
    <a href="javascript:;" linkTarget="A" class="link"> a </a> <br /> 
    <a href="javascript:;" linkTarget="B" class="link"> b </a> <br /> 
    <a href="javascript:;" linkTarget="C" class="link"> c </a> <br /> 
    <div class="A block"> A  </div> 
    <div class="B block"> B  </div> 
    <div class="C block"> C  </div> 
</div> <!-- toggle --> 

This next one is not enabled, to show scoping. 

<div class="toggle2"> 
    <a href="javascript:;" linkTarget="A" class="link"> a </a> <br /> 
    <div class="A block">A</div> 
</div> <!-- toggle2 --> 

This next one is enabled, to show use in multiple positions on a page, such as in a portlet library.  

<div class="toggle"> 
    <a href="javascript:;" linkTarget="A" class="link"> a </a> <br /> 
    <div class="A block">A</div> 
</div> <!-- toggle (2) --> 

</body> 
</html>