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

我有大约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，我可能会做更多

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

---

或者更好的方法是将单击事件绑定到类而不是id上

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

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

对

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

阀体作为1个衬套：

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

---

如果您的元素如下所示：

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

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

请尝试以下操作：

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);
}

---

可以将其缩短为：

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

---

若代码正在运行，但您正在寻求改进，那个么问题应该发布在Sure上，您可以使用作为选择器“[id^=click-]”并获取相关编号或索引，或者使用类或数据id，或者使用任何相关的横向方法，等等。。。为了得到更好的解决方案，你应该发布相关的HTML标记，但无论如何，这是一个离题的问题，所以…不，你需要在这里结束，无论如何，这不是最短的方法。。。。比斯repetita@A.Wolff是的，得到它计数器值将是错误的，现在更正了逻辑“虽然它确实较短并且可能适合这种情况，但当您有一个元素divclicktarget时，这将导致错误。@DoXicK它将尝试选择当前dom中可能不存在的divshowmoretarget？当然，您可以检查新选择器是否有匹配项。还是我错了？是的，你当然可以检查一下。但最透明和可维护的方式是Niet提出的。您的可以工作，没有问题，但它与此用例紧密相关。@DoXicK比我的或Niet更好的方法是使用选择器，使用周围的div和当前元素类型。对于未来的访问者，我同意@DoXicK在这一点上的观点，但我要指出，它实际上不会导致错误-jQuery默认忽略没有元素与选择器匹配的情况，因此它将淡出所有的.showmore，但不会淡入任何内容。然而，如果恰好有一个showmoretarget元素，那么事情就开始变得不可预测了。

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

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

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);
}

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