javascript - 我可以缩短这个 jquery 代码吗

Question

我有大约 20 个按钮，单击时可以查看不同类型的影音框，所以我的 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

是

$("[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"));    
});