只需使用 substr 编写脚本来递增 ID

Question

我有以下代码，其中包含 20 个代码块。除了每个的 ID 号之外，它们都是相同的。我试着寻找如何使用 substr 简化下面粘贴的代码。有人可以解释一下这是否可行并提供示例吗？

$( "#ep1box" ).on('mouseover focusin' , function() {
  $('#episode-1__heading-text').css('text-decoration','underline');
  $('#episode-1__heading-number').css('color','#fff');
});

$( "#ep1box" ).on('mouseleave focusout' , function() {
  $('#episode-1__heading-text').css('text-decoration','none');
  $('#episode-1__heading-number').css('color','#18be91');
});
$( "#ep2box" ).on('mouseover focusin' , function() {
  $('#episode-2__heading-text').css('text-decoration','underline');
  $('#episode-2__heading-number').css('color','#fff');
});

$( "#ep2box" ).on('mouseleave focusout' , function() {
  $('#episode-2__heading-text').css('text-decoration','none');
  $('#episode-2__heading-number').css('color','#c428ff');
});

Answer 1

您不需要使用 substr，因为您要做的是构建一个字符串。只需将它与 +:

放在一起

for(i=0; i < 20; i++) {
  $( "#ep" + i + "box" ).on('mouseover focusin' , function() {
    $('#episode-' + i + '__heading-text').css('text-decoration','underline');
    $('#episode-' + i + '__heading-number').css('color','#fff');
  });

  $( "#ep" + i + "box" ).on('mouseleave focusout' , function() {
    $('#episode-' + i + '__heading-text').css('text-decoration','none');
    $('#episode-' + i + '__heading-number').css('color','#18be91');
  });
}

当然，如果你能给他们一个特定的 class 来表示他们有一些共同点，事情就会简单得多。那么你根本不需要循环。

只需使用 substr 编写脚本来递增 ID

Simply script using substr to increment IDs

jquery

loops

substr