1

zurbファンデーションを使用してmoフィルター用のタブピルを作っています。

これを組み合わせることは可能ですか？変数が変更されているだけでほとんど同じなので、1つの関数だけを使用したいと思います。それをより動的にすることは可能ですか？.val（）は定義リストと互換性がないと思います。

<dl class="tabs pill">
  <dd class="active"><a class="allTab" href='#'>ALL</a></dd>
  <dd><a class="Tab1" href="#">filter1</a></dd>
  <dd><a class="Tab2" href="#">filter2</a></dd>
  <dd><a class="Tab3" href="#">filter3</a></dd> 
</dl>

JS：

$('.tab1').live('click',function(){
  var dis = $(this);
  var str= "filter1";
    $('#searchForm1').ajaxSubmit({
      type: 'get',
        url: '/sample/search?str='+str,
        beforeSend:function(){
          dis.text('Filtering...');
            dis.css({"font-size":"11px"});    
        },
        success:function(html){
          $('.sample').html(html);
              dis.text('filter1');
                dis.css({"font-size":"14px"});
        },
        error:function() {
          alert('Network Error..Please try again.');
        }
  });
});
$('.tab2').live('click',function(){
  var dis = $(this);
  var str= "filter2";
    $('#searchForm1').ajaxSubmit({
      type: 'get',
        url: '/sample/search?str='+str,
        beforeSend:function(){
          dis.text('Filtering...');
            dis.css({"font-size":"11px"});
        },
        success:function(html){
          $('.sample').html(html);
              dis.text('filter2');
                dis.css({"font-size":"14px"});
        },
        error:function() {
          alert('Network Error..Please try again.');
        }
  });
}); 
$('.tab3').live('click',function(){
  var dis = $(this);
  var str= "filter3";
    $('#searchForm1').ajaxSubmit({
      type: 'get',
        url: '/sample/search?str='+str,
        beforeSend:function(){
          dis.text('Filtering...');
            dis.css({"font-size":"11px"});
        },
        success:function(html){
          $('.sample').html(html);
              dis.text('filter3');
                dis.css({"font-size":"14px"});
        },
        error:function() {
          alert('Network Error..Please try again.');
        }
  });
});
4

2 に答える 2

1

このようにしてみてください：

<dl class="tabs pill">
   <dd class="active"><a class="allTab" href='#'>ALL</a></dd>
   <dd><a class="tab" id="Tab1" href="#" data-certiria='filter1'>filter1</a></dd>
   <dd><a class="tab" id="Tab2" href="#" data-certiria='filter1'>filter2</a></dd>
   <dd><a class="tab" id="Tab3" href="#" data-certiria='filter1'>filter3</a></dd> 
</dl>

function filterTab(cretiria, clickedTab) {
    $('#searchForm1').ajaxSubmit({
        type: 'get',
        url: '/sample/search?str=' + cretiria,
        beforeSend: function () {
            clickedTab.text('Filtering...');
            clickedTab.css({
                "font-size": "11px"
            });
        },
        success: function (html) {
            $('.sample').html(html);
            clickedTab.text(cretiria);
            clickedTab.css({
                "font-size": "14px"
            });
        },
        error: function () {
            alert('Network Error..Please try again.');
        }
    });
}

$('.tab').live('click', function () {
    var dis = $(this);
    var str = $(this).data("certiria");
    filterTab(str, dis)
});

同じajaxリクエストコードを再度処理する代わりに、別の関数を作成します。次に、そのタブ内のデータ要素を使用して、必要なフィルター基準を保持します。次に、そのデータ要素を取得し、それをajax関数に送信してリクエストを管理する1つの汎用クリック関数を使用します。

于 2013-01-28T03:54:50.423 に答える
0

.onではなく委任するために使用し.liveます。次に、次の場合を除いて、ほぼ同じ方法を使用できます。

$(".Tabs").on('click', 'dd', function () {
    var str = $(this).text();
    //...
});
于 2013-01-28T03:56:30.897 に答える