次のコードをif then関数にクリーンアップする方法

Question

ここにnoobの質問があります:-)。

次のコードをif then関数に書き込んで、それ以上のエントリを追加せずにカウントアップする方法はありますか？

<script> 
$("#click1").click(function() { 
$("#parentshowhide div:not(#show1)").hide(); 
$("#show1").show("fast"); 
}); 

$("#click2").click(function() { 
$("#parentshowhide div:not(#show2)").hide(); 
$("#show2").show("fast"); 
}); 

$("#click3").click(function() { 
$("#parentshowhide div:not(#show3)").hide(); 
$("#show3").show("fast"); 
}); 

$("#click4").click(function() { 
$("#parentshowhide div:not(#show4)").hide(); 
$("#show4").show("slow"); 
}); 
</script> 

ありがとうございます！

---

コード内の人に誤解を招いて申し訳ありません。コードの「高速」対「遅い」部分は同じでなければなりません。したがって、すべての高速またはすべて遅い、それは変数である必要はありません。

ここですべての提案をテストします。

おかげで、 ネイサン

Answer 1

あなたは#click1、#click2、#click3、などを使用している表示された場合は、あなたがこれらの項目のすべてが同様の行動を持っていることを考えるようになるはずです。マークアップの点で言えば、それらはすべてクラスに属します。

$('.button').click(...) 

Answer 2

HM、私はそれをテストしていないが、あなたは次のことを試みることができる：

<script> 
var i=1; 

while($("#click"+i)){ 
    $("#click"+i).click(function() { 
     $("#parentshowhide div:not(#show"+i+")").hide(); 
     $("#show"+i).show("slow"); 
    } 
    i++; 
} 

</script> 

あなたは相対的なHTML構造 #clickiにクラス .button、およびワークアウトを与えるのであれば、あなたは一度にそれを行うことができます

Answer 3

タブが設定されているようです。 #clickXて#click1すべてが同じ親を共有している場合、あなたはこのような何かを行うことができます：

1. が#click1のそれぞれを確認してください - #clickX（HREFのような）一部のHTMLプロパティを持って、関連する要素のIDを持っていることすべき隠されていない。次に、すべての#click1 - #clickXに共有CSSクラスを指定します。

2. セットには、（1）すべてのリンクされたコンテンツをIDで非表示にする機能（HREFまたは他のプロパティを使用）。 （2）は、クリックされたアイテムによって識別されるコンテンツを示す。

   $('a.clickable', $('.tabset')).live('click', function(event) { 
       // hide all linked content 
       var jThis = $(this); 
       var jSet = jThis.closest('.tabset'); 
       jSet.find('a.clickable').each(function() { 
        $('#' + $(arguments[1]).attr('href')).hide(); 
       }); 
       // show this one piece of content 
       $('#' + jThis.attr('href')).show(); 
   
       // prevent further handling 
       event.preventDefault(); 
       return false; 
   
   }); 
   

   コードターゲット、このマークアップ：

   <div class="tabset"> 
       <a class="clickable" href="#show1">View #1</a> 
       <a class="clickable" href="#show2">View #2</a> 
       ... 
       <a class="clickable" href="#showX">View #X</a> 
   </div> 
   
   <div id="#show1"> [stuff here] </div> 
   <div id="#show2"> [more stuff] </div> 
   <div id="#showX"> [stufffffff] </div> 
   

はここ（#click1がAであり、すべての#clickXは ".tabset" とDIV内にあると仮定して）いくつかのJSです

すべての#clickXアイテムを1つのコンテナに入れることができない（またはしたくない）場合は、少し変更する必要があります。すべてのアイテムをクリックハンドラ中にアクセスできるコレクションに集める必要があるため、すべての「ライバル」コンテンツを識別して隠すことができます。

Answer 4

実際にあります。コード内の共通のものを見つけ出し、再利用できるようにすることです。必要に応じて設定オブジェクトに追加します。このソリューションは、あなたが望むものとまったく同じように動作しますが、ダビンの答えに注意してセレクタの能力を最大限に引き出す必要があります。

var config = { 
    1: 'fast', 
    2: 'fast', 
    3: 'fast', 
    4: 'slow' 
}; 

for (var key in config) { 
    var value = config[key]; 

    $("#click" + key).click(function() { 
    $("#parentshowhide div:not(#show" + key + ")").hide(); 
    $("#show" + key).show(value); 
    }); 
} 

Answer 5

これを行う最も簡単な方法は次のとおりです。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     // Add a class of 'toggle' to the links 
     $("a.toggle").click(function(){ 
      // Create a variable to know which one we're hiding/showing 
      var number = toInt($(this).attr("id").replace("click","")); 
      $("#parentshowhide div:not(#show" + number)).hide(); 
      $("#show" + number).show("fast"); 
     }) 
    }) 
</script> 

これはテストされていませんが、ロジックは健全です。どんな問題もjsFiddleを作成してください。私はそれをフォローします。