Question

我有2个点击事件经历了一系列不同的动作，2个事件中唯一不同的是2行。有没有办法结合这些点击，以减少使用的代码量？

$('a.register').click(function() {
                $('h4#registerHead').addClass('active');
                $('#registerMessage').show();
                $('#nav li span a').css({'color':'#8F8F8F'});
                $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
            });

            $('a.subscribe').click(function() {
                $('h4#subscribeHead').addClass('active');
                $('#subscribeMessage').show();
                $('#nav li span a').css({'color':'#8F8F8F'});
                $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
            });

欢迎所有建议，谢谢。

Answer 1

第一种方式：

var doIt = function(event){
  $("h4#"+event.data.type+"Head").addClass('active');
  $("#"+event.data.type+"Message").show();
  $('#nav li span a').css({'color':'#8F8F8F'});
  $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
};

$('a.register').bind('click', {type: 'register'}, doIt);
$('a.subscribe').bind('click', {type: 'subscribe', doIt});

第二种方式：

var commonHandler = function(){
  $('#nav li span a').css({'color':'#8F8F8F'});
  $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
};

$('a.register').click(function() {
  $('h4#registerHead').addClass('active');
  $('#registerMessage').show();
  commonHandler();
});

$('a.subscribe').click(function() {
  $('h4#subscribeHead').addClass('active');
  $('#subscribeMessage').show();
  commonHandler();
});

Answer 2

您可以更改它，以便它取决于文档的结构以及元素在其中的相对位置。显然，这取决于您的HTML。以下假设每个链接都包含在DIV中，该DIV也包含非公共元素。使其适应您的HTML，这可能涉及根据需要修改HTML以使其更容易。

$('a.register, a.subscribe').click( function() {
     var $container = $(this).closest('div.container');
     $('h4',$container).addClass('active');
     $('.message',$container).show();
     $('#nav li span a').css({'color':'#8F8F8F'}); 
     $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
});

示例HTML：

<div class="container">
   <h4>Register</h4>
   <div id="registerMessage" class="message"></div>
   <div>
      <a href="#" class="register">Do it!</a>
   </div>
</div>
<div class="container">
   <h4>Subscribe</h4>
   <div id="subscribeMessage" class="message"></div>
   <div>
      <a href="#" class="subscribe">Do it!</a>
   </div>
</div>

Answer 3

概括该功能非常简单。这是我看到的最简单的方法

function generateClickHandler(type) {
  return function() {
    $('h4#' + type + 'Head').addClass('active');
    $('#' + type + 'Message').show();
    $('#nav li span a').css({'color':'#8F8F8F'});
    $('#alertNav').css({'color':'#dedede'}).addClass('activeSub');
  };
}

$('a.register').click(generateClickHandler('register'));
$('a.subscribe').click(generateClickHandler('subscribe'));

结合类似的点击处理程序，以减少在jquery中使用的代码？

3 个答案: