我可以缩短此 jquery 代码吗

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

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

或者更好的是，将点击事件绑定到 class 而不是 id

Answer 2

如果您的 HTML 是可编辑的，请尝试这样的操作：

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

然后你的jQuery变成：

$(function() {
    $(document.body).on("click",".clickable",function(e) {
        e.preventDefault();
        show(this.getAttribute("data-for"));
    });

    function show(sel) { ... }
});

Answer 3

是

$("[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 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 代码吗

Can i shorten this jquery code

javascript

jquery

code-cleanup