9

何百ものリンクがあり、基本的に同じタスクを実行するにもかかわらず、それぞれに独自の jQuery 関数があるため、JavaScript ファイルのサイズが手に負えなくなりつつあります。

ここに短い抜粋があります：

$("#link1").click(function ()
{
  $(".myDiv").hide();
  $("#myDiv1").toggle();
});

$("#link2").click(function ()
{
  $(".myDiv").hide();
  $("#myDiv2").toggle();
});

$("#link3").click(function ()
{
  $(".myDiv").hide();
  $("#myDiv3").toggle();
});

このロジックの一部を抽象化して、同じことを行う何百もの関数ではなく、1 つの関数だけにする方法はありますか?

4

9 に答える 9

12

同じことを行い、そのクラスでjQueryを操作するすべてのリンクにクラスを追加できます。

<a href='whatever' id='link_1' class='toggler'>text</a>
<a href='whatever' id='link_2' class='toggler'>text</a>

jQueryコードは次のようになります。

$(".toggler").click( function(){
    // toggle the divs
    var number = $(this).attr("id").split('_')[1];
    $(".myDiv").hide();
    $("#myDiv"+ number).toggle();
});
于 2009-07-08T19:21:50.363 に答える
3

私が使用する一般的なアプローチは、絶対セレクターを使用するのではなく、トラバーサル メソッドを使用して関連する要素を見つけることです。これにより、ID の形式などに複雑に依存することなく、同様に構成された要素に同じコードを適用できます。正しく実行すると、マークアップへの小さな変更に対してもかなり堅牢になります。

たとえば、一連のリンクがあり、それぞれのリンクをクリックすると切り替わる div が続くとします。リンクにはそれぞれ特定のクラスがあるため、簡単に参照できます。

<a href="#" class="linkClass">Toggle</a>
<div>
     Some content...
</div>

<a href="#" class="linkClass">Toggle</a>
<div>
     Other content
</div>

次に、クラスごとにすべてのリンクを見つけてから、nextメソッドを使用して関連する div を見つけ、その可視性を切り替えます。これは単純な例であることに注意してください。正確なマークアップによっては、より複雑なトラバーサル メカニズムを使用し、要素の種類またはクラスでフィルター処理する必要がある場合もあります。

$('.linkClass').click( function() {
    $(this).next().toggle();
});
于 2009-07-08T19:25:13.820 に答える
3

ターゲットの ID をリンクの href に追加するのはどうですか?

<a id="link1" href="#myDiv1" class="toggle">Toggle 1</a><br/>
<a id="link2" href="#myDiv2" class="toggle">Toggle 2</a><br/>
<a id="link3" href="#myDiv3" class="toggle">Toggle 3</a><br/>

次に、次のように単一の関数を作成できます。

$(".toggle").click(function(e) {
    e.preventDefault();
    $(".myDiv").hide();
    $($(this).attr('href')).toggle();
});

または私が使用した別のアプローチ：

$(".toggle").each(function(i) {
    $(this).click(function(e) {
        e.preventDefault();
        $(".myDiv").hide();
        $(".myDiv:eq("+i+")").toggle();
    });
});

これは tvanfosson のアイデアと同じ流れで、ある種の DOM 関係を使用して要素をリンクします。この場合、link 要素と div 要素がページ上で同じ順序であると仮定しています。

于 2009-07-08T19:27:11.537 に答える
1

クリックするたびに外部関数を呼び出し、数値文字列のパラメーターを渡すことができます。

元：

$("#link1").click(toggle("1"));
$("#link2").click(toggle("2"));

function toggle(number) {
    $(".myDiv").hide();
    $("#myDiv"+number).toggle();
}
于 2009-07-08T19:17:12.213 に答える
1 
function makeToggler(number) {
    $('#link' + number).click(function() {
        $('.myDiv').hide();
        $('#myDiv' + number).toggle();
    });
}

makeToggler(1);
makeToggler(2);
makeToggler(3);

命名基準を満たすようにこれを適応させることができます。

div とリンクの構造によっては、より良い方法があります。要素の構造を投稿する場合は、それをお見せします。

于 2009-07-08T19:25:23.133 に答える
0

クレイグのソリューションに基づいて構築：

$("#link1, #link2").click(toggle(this));

function toggle(obj) {
    $(".myDiv").hide();
    $("#myDiv" + $(obj).attr("id").replace('link','')).toggle();
}
于 2009-07-08T19:22:13.000 に答える
0

リンクを次のように変更します（IDの名前を数字だけに変更します）

<a href='#test1' id='1' class='link'> ... </a>
<a href='#test2' id='2' class='link'> ... </a>
<a href='#test3' id='3' class='link'> ... </a>

そしてjsで：

$(document).ready(function(){
    $('.link').click(function(){
      $('.myDiv').hide();
      var id = $(this).attr('id'); // take the id
      $('#myDiv'+id).toggle(); 
    });
});
于 2009-07-08T19:23:11.780 に答える
0

これは単純なリファクタリングだと思います

関数をそのように定義できます

function doSomethingTo(thisDiv)
{
   $(".myDiv").hide();
   $(thisDiv).toggle();
}

必要な場所で再利用するだけです

$("#link1).click(doSomethingTo(thisDiv));
$("#link2).click(doSomethingTo(thisDiv));
于 2009-07-08T19:18:29.480 に答える
0

makeToggle をループに入れますか?

function makeToggler(number) {
    $('#link' + number).click(function() {
        $('.myDiv').hide();
        $('#myDiv' + number).toggle();
    });
}

for(i=1;i>=#;i++) {makeToggler(i);}

次に、リンクをカウントすることもできます。これをリンクするものはありますか?:

function countElementsByClass(className){
  var count = 0;
  var o = document.getElementsByTagName("a").className;
  for(var i=0;i<o.length;i+){
      if(o[i].className == "accordion/whatever")
          count ++;
      }

  return count;
}

クレジット: SLaCKS ソリューションの構築

于 2009-07-08T20:30:00.833 に答える