Javascript 如何使用100个其他值重复脚本最多100次

$（“#a_b001”）.mouseover（函数（）{
$（“a#u p001”）.show（）；
$（“#a#bor001”）.show（）；
}).mouseout（函数（）{
$（“#a_p001”）.hide（）；
$（“#a#bor001”）.hide（）；
});
$（“#a_b002”）.mouseover（函数（）{
$（“a#u p002”）.show（）；
$（“#a#bor002”）.show（）；
}).mouseout（函数（）{
$（“#a_p002”）.hide（）；
$（“#a#bor002”）.hide（）；
});
$（“#a_b003”）.mouseover（函数（）{
$（“a#u p003”）.show（）；
$（“#a#bor003”）.show（）；
}).mouseout（函数（）{
$（“#a_p003”）.hide（）；
$（“#a#bor001”）.hide（）；
});
*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.b_法案_p_1{
位置：绝对位置；
边框：1px实心#e9e9e9；
宽度：150px；
背景：#fff；
高度：100px；
填充：10px；
顶部：124px；
左：-104px；
}
.b_法案\u p_2{
位置：绝对位置；
边框：1px实心#e9e9e9；
宽度：150px；
背景：#fff；
高度：100px；
填充：10px；
顶部：124px；
左：-90px；
}
.b_法案_p_3{
位置：绝对位置；
边框：1px实心#e9e9e9；
宽度：150px；
背景：#fff；
高度：100px；
填充：10px；
顶部：124px；
左：-74px；
}

上午12点
上午6点
下午12点
下午六点
上午12点
M
T
W
T
F
s
s
测试
测试
Testtt
也许您应该尝试下面的逻辑

 <script>
var str = "";
for(var i = 1 ;i<=100;i++){
 str = "00"+i;

$("#a_b"+str).mouseover(function() {
  $("#a_p"+str).show();
  $("#a_bor"+str).show();
}).mouseout(function() {
  $("#a_p"+str).hide();
  $("#a_bor"+str).hide();
});
}
</script>


var str=“”；
对于（var i=1；i我为您编写了一个示例


$（“.myclass”）.mouseover（函数（）{
var index=$（this.attr（'index'）；
$（“#p#”+索引）.show（）；
$（“#bor#”+索引）.show（）；
}).mouseout（函数（）{
var index=$（this.attr（'index'）；
$（“#p#”+索引）.hide（）；
$（“#bor#”+索引）.hide（）；
})；
。隐藏{
显示：无；
}
.myclass{
字体大小：粗体；
}

A.
aa
aaa
B
bb
bbb
C
复写的副本
ccc
D
dd
ddd
使用下面的示例

这些是悬停元素。每个元素都包含包含其id号的数据id属性

<rect data-id="001" id="a_b001" class="square hour-0 day-6" fill="rgba(234,241,254,1)" x="0" y="108" height="16" width="16"></rect>
            <rect data-id="002" id="a_b003" class="square hour-2 day-6" fill="rgba(255,255,255,1)" x="36" y="108" height="16" width="16"></rect>
            <rect data-id="003" class="square hour-3 day-6" fill="rgba(255,255,255,1)" x="54" y="108" height="16" width="16"></rect>

不应创建N个事件侦听器，而应仅基于类创建1个事件侦听器

这些是具有共同行为的不同元素。通过设计，它们也应该具有一些视觉元素

您可以创建一个CSS类，将其放在所有这些元素上，并添加该类的侦听器。
那么像这样的东西就可以了

function getNumber(id) {
    return id.substr(id.indexOf("a_b") + 3);
}

$(".button").mouseover(function(e) {
    let number = getNumber(e.target.id); 

    $("#a_p" + number).show();
    $("#a_bor" + number).show();
}).mouseout(function(e) {
    let number = getNumber(e.target.id)

    $("#a_p" + number).hide();
    $("#a_p" + number).hide();
});

我只做了3次。做一些必要的改变来帮助：-）
$(".square").mouseover(function() {

  var id = $(this).attr('data-id'); //returns hovering rect data-id

  $("#a_p"+id).show(); //concat id
  $("#a_bor"+id).show();

}).mouseout(function() {

   var id = $(this).attr('data-id'); //returns hovering rect data-id

   $("#a_p"+id).hide();
   $("#a_bor"+id).hide();

 });

function getNumber(id) {
    return id.substr(id.indexOf("a_b") + 3);
}

$(".button").mouseover(function(e) {
    let number = getNumber(e.target.id); 

    $("#a_p" + number).show();
    $("#a_bor" + number).show();
}).mouseout(function(e) {
    let number = getNumber(e.target.id)

    $("#a_p" + number).hide();
    $("#a_p" + number).hide();
});