Question

点击时我有大约20个按钮可以查看不同类型的av框，所以我的JS代码非常长。该功能工作得很完美，但我想知道是否有办法缩短此代码或使其更清洁？

// Content lvl 1
function show(sel) {
  var el = $(sel);
  el.fadeToggle();
  $('.showmore-1').not(el).fadeOut("slow");
}

$('.showmore-1').hide();

$('#click-1a').click(function () {
  show('#showmore-1a');
});

$('#click-1b').click(function () {
  show('#showmore-1b');
});

// Content lvl 2
function show(sel) {
  var el = $(sel);
  el.fadeToggle();
  $('.showmore-2').not(el).fadeOut("slow");
}

$('.showmore-2').hide();

$('#click-2a').click(function () {
  show('#showmore-2a');
});

$('#click-2b').click(function () {
  show('#showmore-2b');


// Content lvl 3
function show(sel) {
  var el = $(sel);
  el.fadeToggle();
  $('.showmore-3').not(el).fadeOut("slow");
}

$('.showmore-3').hide();

$('#click-3a').click(function () {
  show('#showmore-3a');
});

$('#click-3b').click(function () {
  show('#showmore-3b');
});

这将继续点击20我可能会做更多。

Answer 1

YES

$("[id^=click]").click(function (e) { //match elements with ID's starting with "click"
    oldSelector =  e.target.id; //get the ID of the clicked element
    newSelector = oldSelector.replace("click", "showmore"); //replace string
    show(newSelector);    
});

优点是，如果以相同的方式添加更多或更少的按钮，代码将继续工作。无需为此更新此代码，也无需更新HTML本身。

身体为1衬垫：

$("[id^=click]").click(function (e) { 
    show(e.target.id.replace("click", "showmore"));    
});

Answer 2

如果您的HTML可以编辑，请尝试以下操作：

EDIT

然后你的jQuery变成了：

<button class="clickable" data-for="#showmore-1">Click</button>

Answer 3

for ( var counter = 0; counter < 20; counter++)
{
  $('#click-' + counter).click(function () {
    var idCounter = $( this ).attr( "id" ).split( "-" )[1];
    show('#showmore-' + idCounter );
  });
}

或者更好的是，将click事件绑定到类而不是id

Answer 4

如果您的元素如下：

<div id="click-1">click me</div>

让它们像：

<div class="showing-trigger" data-target-id="showmore-1">click me</div>

然后您的处理程序可能是：

$('.showing-trigger').on('click', function () {
    show('#' + $(this).data('target-id'));
});

请注意，使用此代码，您的触发器可以显示任何ID的div。

Answer 5

试试这个：

for(var i=1,l=21; i<l; i++){
  (function(i){ // closure scopes off i so it's not at end of loop when Event occurs
    $('#click-'+i).click(function(){
      $('.showmore').fadeOut('slow', function(){ // fade showmore class out
        $('#showmore-'+i).show(); // show just the one you want
      });
    });
  })(i);
}

Answer 6

可以缩短到这一点：

$("[id^= click]").click(function (e) { 
    oldSelector =  e.target.id; //get the ID of the clicked element
    newSelector = oldSelector.replace("click", "showmore"); 
    show(newSelector); 
});

我可以缩短这个jquery代码吗？

6 个答案: