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 请求代码，而是创建一个单独的函数。然后使用该选项卡内的数据元素来保存所需的过滤条件。然后使用一个通用的 click 函数来检索该数据元素并将其发送到 ajax 函数来管理请求。

于 2013-01-28T03:54:50.423 回答
0

用于.on委托而不是.live. 然后，您可以使用几乎相同的方法，但如下所示：

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