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

当然，如果你能给他们所有特定的课程来表示他们有共同点，那会让事情变得更加直截了当。然后你根本不需要循环。

只需使用substr脚本来增加ID

1 个答案: