如何用 100 个其他值重复脚本最多 100 次
How to repeat the script up to 100 times with 100 other values
$("#a_b001").mouseover(function() {
$("#a_p001").show();
$("#a_bor001").show();
}).mouseout(function() {
$("#a_p001").hide();
$("#a_bor001").hide();
});
$("#a_b002").mouseover(function() {
$("#a_p002").show();
$("#a_bor002").show();
}).mouseout(function() {
$("#a_p002").hide();
$("#a_bor002").hide();
});
$("#a_b003").mouseover(function() {
$("#a_p003").show();
$("#a_bor003").show();
}).mouseout(function() {
$("#a_p003").hide();
$("#a_bor001").hide();
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.b_act_p_1 {
position: absolute;
border: 1px solid #e9e9e9;
width: 150px;
background: #fff;
height: 100px;
padding: 10px;
top: 124px;
left: -104px;
}
.b_act_p_2 {
position: absolute;
border: 1px solid #e9e9e9;
width: 150px;
background: #fff;
height: 100px;
padding: 10px;
top: 124px;
left: -90px;
}
.b_act_p_3 {
position: absolute;
border: 1px solid #e9e9e9;
width: 150px;
background: #fff;
height: 100px;
padding: 10px;
top: 124px;
left: -74px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart-frame top_s_b_d" id="b_seg_c">
<svg width="488" height="168">
<g transform="translate(16 16)">
<g class="hour-axis" transform="translate(18 124)" opacity="1">
<g transform="translate(-0.5 0)">
<line y2="4" stroke="#9e9e9e" shape-rendering="crispEdges"></line>
<text y="8" fill="#9e9e9e" dominant-baseline="hanging" text-anchor="start">12 AM</text>
</g>
<g transform="translate(107.5 0)">
<line y2="4" stroke="#9e9e9e" shape-rendering="crispEdges"></line>
<text y="8" fill="#9e9e9e" dominant-baseline="hanging" text-anchor="middle">6 AM</text>
</g>
<g transform="translate(215.5 0)">
<line y2="4" stroke="#9e9e9e" shape-rendering="crispEdges"></line>
<text y="8" fill="#9e9e9e" dominant-baseline="hanging" text-anchor="middle">12 PM</text>
</g>
<g transform="translate(323.5 0)">
<line y2="4" stroke="#9e9e9e" shape-rendering="crispEdges"></line>
<text y="8" fill="#9e9e9e" dominant-baseline="hanging" text-anchor="middle">6 PM</text>
</g>
<g transform="translate(431.5 0)">
<line y2="4" stroke="#9e9e9e" shape-rendering="crispEdges"></line>
<text y="8" fill="#9e9e9e" dominant-baseline="hanging" text-anchor="end">12 AM</text>
</g>
<line x1="-4" x2="434" y1="0.5" y2="0.5" stroke="#9e9e9e"></line>
</g>
<g class="day-axis" opacity="1">
<text y="8" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">M</text>
<text y="26" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">T</text>
<text y="44" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">W</text>
<text y="62" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">T</text>
<text y="80" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">F</text>
<text y="98" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">S</text>
<text y="116" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">S</text>
<line x1="17.5" x2="17.5" y1="-4" y2="128" stroke="#9e9e9e"></line>
</g>
<g transform="translate(18 0)" class="square-area">
<rect 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 id="a_b002" class="square hour-1 day-6" fill="rgba(255,255,255,1)" x="18" y="108" style="border: 2px #333 solid;" height="16" width="16"></rect>
<rect 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 class="square hour-3 day-6" fill="rgba(255,255,255,1)" x="54" y="108" height="16" width="16"></rect>
<rect class="square hour-4 day-6" fill="rgba(255,255,255,1)" x="72" y="108" height="16" width="16"></rect>
<rect class="square hour-5 day-6" fill="rgba(255,255,255,1)" x="90" y="108" height="16" width="16"></rect>
<rect class="square hour-6 day-6" fill="rgba(224,235,253,1)" x="108" y="108" height="16" width="16"></rect>
<rect class="square hour-7 day-6" fill="rgba(213,228,253,1)" x="126" y="108" height="16" width="16"></rect>
<rect class="square hour-8 day-6" fill="rgba(213,228,253,1)" x="144" y="108" height="16" width="16"></rect>
<rect class="square hour-9 day-6" fill="rgba(234,241,254,1)" x="162" y="108" height="16" width="16"></rect>
<rect class="square hour-10 day-6" fill="rgba(213,228,253,1)" x="180" y="108" height="16" width="16"></rect>
<rect class="square hour-11 day-6" fill="rgba(224,235,253,1)" x="198" y="108" height="16" width="16"></rect>
<rect class="square hour-12 day-6" fill="rgba(213,228,253,1)" x="216" y="108" height="16" width="16"></rect>
<rect class="square hour-13 day-6" fill="rgba(192,214,251,1)" x="234" y="108" height="16" width="16"></rect>
<rect class="square hour-14 day-6" fill="rgba(213,228,253,1)" x="252" y="108" height="16" width="16"></rect>
<rect class="square hour-15 day-6" fill="rgba(171,201,250,1)" x="270" y="108" height="16" width="16"></rect>
<rect class="square hour-16 day-6" fill="rgba(203,221,252,1)" x="288" y="108" height="16" width="16"></rect>
<rect class="square hour-17 day-6" fill="rgba(192,214,251,1)" x="306" y="108" height="16" width="16"></rect>
<rect class="square hour-18 day-6" fill="rgba(213,228,253,1)" x="324" y="108" height="16" width="16"></rect>
<rect class="square hour-19 day-6" fill="rgba(192,214,251,1)" x="342" y="108" height="16" width="16"></rect>
<rect class="square hour-20 day-6" fill="rgba(161,194,250,1)" x="360" y="108" height="16" width="16"></rect>
<rect class="square hour-21 day-6" fill="rgba(150,187,249,1)" x="378" y="108" height="16" width="16"></rect>
<rect class="square hour-22 day-6" fill="rgba(98,153,246,1)" x="396" y="108" height="16" width="16"></rect>
<rect class="square hour-23 day-6" fill="rgba(192,214,251,1)" x="414" y="108" height="16" width="16"></rect>
<rect class="square hour-0 day-0" fill="rgba(245,248,254,1)" x="0" y="0" height="16" width="16"></rect>
<rect class="square hour-1 day-0" fill="rgba(245,248,254,1)" x="18" y="0" height="16" width="16"></rect>
<rect class="square hour-2 day-0" fill="rgba(234,241,254,1)" x="36" y="0" height="16" width="16"></rect>
<rect class="square hour-3 day-0" fill="rgba(255,255,255,1)" x="54" y="0" height="16" width="16"></rect>
<rect class="square hour-4 day-0" fill="rgba(255,255,255,1)" x="72" y="0" height="16" width="16"></rect>
<rect class="square hour-5 day-0" fill="rgba(255,255,255,1)" x="90" y="0" height="16" width="16"></rect>
<rect class="square hour-6 day-0" fill="rgba(255,255,255,1)" x="108" y="0" height="16" width="16"></rect>
<rect class="square hour-7 day-0" fill="rgba(234,241,254,1)" x="126" y="0" height="16" width="16"></rect>
<rect class="square hour-8 day-0" fill="rgba(224,235,253,1)" x="144" y="0" height="16" width="16"></rect>
<rect class="square hour-9 day-0" fill="rgba(234,241,254,1)" x="162" y="0" height="16" width="16"></rect>
<rect class="square hour-10 day-0" fill="rgba(213,228,253,1)" x="180" y="0" height="16" width="16"></rect>
<rect class="square hour-11 day-0" fill="rgba(203,221,252,1)" x="198" y="0" height="16" width="16"></rect>
<rect class="square hour-12 day-0" fill="rgba(213,228,253,1)" x="216" y="0" height="16" width="16"></rect>
<rect class="square hour-13 day-0" fill="rgba(192,214,251,1)" x="234" y="0" height="16" width="16"></rect>
<rect class="square hour-14 day-0" fill="rgba(192,214,251,1)" x="252" y="0" height="16" width="16"></rect>
<rect class="square hour-15 day-0" fill="rgba(161,194,250,1)" x="270" y="0" height="16" width="16"></rect>
<rect class="square hour-16 day-0" fill="rgba(213,228,253,1)" x="288" y="0" height="16" width="16"></rect>
<rect class="square hour-17 day-0" fill="rgba(234,241,254,1)" x="306" y="0" height="16" width="16"></rect>
<rect class="square hour-18 day-0" fill="rgba(203,221,252,1)" x="324" y="0" height="16" width="16"></rect>
<rect class="square hour-19 day-0" fill="rgba(182,208,251,1)" x="342" y="0" height="16" width="16"></rect>
<rect class="square hour-20 day-0" fill="rgba(255,255,255,1)" x="360" y="0" height="16" width="16"></rect>
<rect class="square hour-21 day-0" fill="rgba(171,201,250,1)" x="378" y="0" height="16" width="16"></rect>
<rect class="square hour-22 day-0" fill="rgba(203,221,252,1)" x="396" y="0" height="16" width="16"></rect>
<rect class="square hour-23 day-0" fill="rgba(66,133,244,1)" x="414" y="0" height="16" width="16"></rect>
<rect class="square hour-0 day-1" fill="rgba(234,241,254,1)" x="0" y="18" height="16" width="16"></rect>
<rect class="square hour-1 day-1" fill="rgba(213,228,253,1)" x="18" y="18" height="16" width="16"></rect>
<rect class="square hour-2 day-1" fill="rgba(255,255,255,1)" x="36" y="18" height="16" width="16"></rect>
<rect class="square hour-3 day-1" fill="rgba(255,255,255,1)" x="54" y="18" height="16" width="16"></rect>
<rect class="square hour-4 day-1" fill="rgba(255,255,255,1)" x="72" y="18" height="16" width="16"></rect>
<rect class="square hour-5 day-1" fill="rgba(245,248,254,1)" x="90" y="18" height="16" width="16"></rect>
<rect class="square hour-6 day-1" fill="rgba(255,255,255,1)" x="108" y="18" height="16" width="16"></rect>
<rect class="square hour-7 day-1" fill="rgba(224,235,253,1)" x="126" y="18" height="16" width="16"></rect>
<rect class="square hour-8 day-1" fill="rgba(255,255,255,1)" x="144" y="18" height="16" width="16"></rect>
<rect class="square hour-9 day-1" fill="rgba(255,255,255,1)" x="162" y="18" height="16" width="16"></rect>
<rect class="square hour-10 day-1" fill="rgba(182,208,251,1)" x="180" y="18" height="16" width="16"></rect>
<rect class="square hour-11 day-1" fill="rgba(161,194,250,1)" x="198" y="18" height="16" width="16"></rect>
<rect class="square hour-12 day-1" fill="rgba(224,235,253,1)" x="216" y="18" height="16" width="16"></rect>
<rect class="square hour-13 day-1" fill="rgba(255,255,255,1)" x="234" y="18" height="16" width="16"></rect>
<rect class="square hour-14 day-1" fill="rgba(192,214,251,1)" x="252" y="18" height="16" width="16"></rect>
<rect class="square hour-15 day-1" fill="rgba(245,248,254,1)" x="270" y="18" height="16" width="16"></rect>
<rect class="square hour-16 day-1" fill="rgba(224,235,253,1)" x="288" y="18" height="16" width="16"></rect>
<rect class="square hour-17 day-1" fill="rgba(245,248,254,1)" x="306" y="18" height="16" width="16"></rect>
<rect class="square hour-18 day-1" fill="rgba(203,221,252,1)" x="324" y="18" height="16" width="16"></rect>
<rect class="square hour-19 day-1" fill="rgba(192,214,251,1)" x="342" y="18" height="16" width="16"></rect>
<rect class="square hour-20 day-1" fill="rgba(203,221,252,1)" x="360" y="18" height="16" width="16"></rect>
<rect class="square hour-21 day-1" fill="rgba(213,228,253,1)" x="378" y="18" height="16" width="16"></rect>
<rect class="square hour-22 day-1" fill="rgba(171,201,250,1)" x="396" y="18" height="16" width="16"></rect>
<rect class="square hour-23 day-1" fill="rgba(224,235,253,1)" x="414" y="18" height="16" width="16"></rect>
<rect class="square hour-0 day-2" fill="rgba(234,241,254,1)" x="0" y="36" height="16" width="16"></rect>
<rect class="square hour-1 day-2" fill="rgba(255,255,255,1)" x="18" y="36" height="16" width="16"></rect>
<rect class="square hour-2 day-2" fill="rgba(255,255,255,1)" x="36" y="36" height="16" width="16"></rect>
<rect class="square hour-3 day-2" fill="rgba(255,255,255,1)" x="54" y="36" height="16" width="16"></rect>
<rect class="square hour-4 day-2" fill="rgba(245,248,254,1)" x="72" y="36" height="16" width="16"></rect>
<rect class="square hour-5 day-2" fill="rgba(255,255,255,1)" x="90" y="36" height="16" width="16"></rect>
<rect class="square hour-6 day-2" fill="rgba(255,255,255,1)" x="108" y="36" height="16" width="16"></rect>
<rect class="square hour-7 day-2" fill="rgba(255,255,255,1)" x="126" y="36" height="16" width="16"></rect>
<rect class="square hour-8 day-2" fill="rgba(234,241,254,1)" x="144" y="36" height="16" width="16"></rect>
<rect class="square hour-9 day-2" fill="rgba(224,235,253,1)" x="162" y="36" height="16" width="16"></rect>
<rect class="square hour-10 day-2" fill="rgba(213,228,253,1)" x="180" y="36" height="16" width="16"></rect>
<rect class="square hour-11 day-2" fill="rgba(213,228,253,1)" x="198" y="36" height="16" width="16"></rect>
<rect class="square hour-12 day-2" fill="rgba(171,201,250,1)" x="216" y="36" height="16" width="16"></rect>
<rect class="square hour-13 day-2" fill="rgba(150,187,249,1)" x="234" y="36" height="16" width="16"></rect>
<rect class="square hour-14 day-2" fill="rgba(213,228,253,1)" x="252" y="36" height="16" width="16"></rect>
<rect class="square hour-15 day-2" fill="rgba(234,241,254,1)" x="270" y="36" height="16" width="16"></rect>
<rect class="square hour-16 day-2" fill="rgba(161,194,250,1)" x="288" y="36" height="16" width="16"></rect>
<rect class="square hour-17 day-2" fill="rgba(224,235,253,1)" x="306" y="36" height="16" width="16"></rect>
<rect class="square hour-18 day-2" fill="rgba(161,194,250,1)" x="324" y="36" height="16" width="16"></rect>
<rect class="square hour-19 day-2" fill="rgba(213,228,253,1)" x="342" y="36" height="16" width="16"></rect>
<rect class="square hour-20 day-2" fill="rgba(245,248,254,1)" x="360" y="36" height="16" width="16"></rect>
<rect class="square hour-21 day-2" fill="rgba(171,201,250,1)" x="378" y="36" height="16" width="16"></rect>
<rect class="square hour-22 day-2" fill="rgba(182,208,251,1)" x="396" y="36" height="16" width="16"></rect>
<rect class="square hour-23 day-2" fill="rgba(213,228,253,1)" x="414" y="36" height="16" width="16"></rect>
<rect class="square hour-0 day-3" fill="rgba(245,248,254,1)" x="0" y="54" height="16" width="16"></rect>
<rect class="square hour-1 day-3" fill="rgba(255,255,255,1)" x="18" y="54" height="16" width="16"></rect>
<rect class="square hour-2 day-3" fill="rgba(255,255,255,1)" x="36" y="54" height="16" width="16"></rect>
<rect class="square hour-3 day-3" fill="rgba(255,255,255,1)" x="54" y="54" height="16" width="16"></rect>
<rect class="square hour-4 day-3" fill="rgba(255,255,255,1)" x="72" y="54" height="16" width="16"></rect>
<rect class="square hour-5 day-3" fill="rgba(255,255,255,1)" x="90" y="54" height="16" width="16"></rect>
<rect class="square hour-6 day-3" fill="rgba(255,255,255,1)" x="108" y="54" height="16" width="16"></rect>
<rect class="square hour-7 day-3" fill="rgba(192,214,251,1)" x="126" y="54" height="16" width="16"></rect>
<rect class="square hour-8 day-3" fill="rgba(224,235,253,1)" x="144" y="54" height="16" width="16"></rect>
<rect class="square hour-9 day-3" fill="rgba(234,241,254,1)" x="162" y="54" height="16" width="16"></rect>
<rect class="square hour-10 day-3" fill="rgba(224,235,253,1)" x="180" y="54" height="16" width="16"></rect>
<rect class="square hour-11 day-3" fill="rgba(224,235,253,1)" x="198" y="54" height="16" width="16"></rect>
<rect class="square hour-12 day-3" fill="rgba(234,241,254,1)" x="216" y="54" height="16" width="16"></rect>
<rect class="square hour-13 day-3" fill="rgba(203,221,252,1)" x="234" y="54" height="16" width="16"></rect>
<rect class="square hour-14 day-3" fill="rgba(224,235,253,1)" x="252" y="54" height="16" width="16"></rect>
<rect class="square hour-15 day-3" fill="rgba(171,201,250,1)" x="270" y="54" height="16" width="16"></rect>
<rect class="square hour-16 day-3" fill="rgba(171,201,250,1)" x="288" y="54" height="16" width="16"></rect>
<rect class="square hour-17 day-3" fill="rgba(213,228,253,1)" x="306" y="54" height="16" width="16"></rect>
<rect class="square hour-18 day-3" fill="rgba(234,241,254,1)" x="324" y="54" height="16" width="16"></rect>
<rect class="square hour-19 day-3" fill="rgba(234,241,254,1)" x="342" y="54" height="16" width="16"></rect>
<rect class="square hour-20 day-3" fill="rgba(224,235,253,1)" x="360" y="54" height="16" width="16"></rect>
<rect class="square hour-21 day-3" fill="rgba(224,235,253,1)" x="378" y="54" height="16" width="16"></rect>
<rect class="square hour-22 day-3" fill="rgba(192,214,251,1)" x="396" y="54" height="16" width="16"></rect>
<rect class="square hour-23 day-3" fill="rgba(203,221,252,1)" x="414" y="54" height="16" width="16"></rect>
<rect class="square hour-0 day-4" fill="rgba(255,255,255,1)" x="0" y="72" height="16" width="16"></rect>
<rect class="square hour-1 day-4" fill="rgba(255,255,255,1)" x="18" y="72" height="16" width="16"></rect>
<rect class="square hour-2 day-4" fill="rgba(255,255,255,1)" x="36" y="72" height="16" width="16"></rect>
<rect class="square hour-3 day-4" fill="rgba(255,255,255,1)" x="54" y="72" height="16" width="16"></rect>
<rect class="square hour-4 day-4" fill="rgba(255,255,255,1)" x="72" y="72" height="16" width="16"></rect>
<rect class="square hour-5 day-4" fill="rgba(234,241,254,1)" x="90" y="72" height="16" width="16"></rect>
<rect class="square hour-6 day-4" fill="rgba(245,248,254,1)" x="108" y="72" height="16" width="16"></rect>
<rect class="square hour-7 day-4" fill="rgba(245,248,254,1)" x="126" y="72" height="16" width="16"></rect>
<rect class="square hour-8 day-4" fill="rgba(245,248,254,1)" x="144" y="72" height="16" width="16"></rect>
<rect class="square hour-9 day-4" fill="rgba(203,221,252,1)" x="162" y="72" height="16" width="16"></rect>
<rect class="square hour-10 day-4" fill="rgba(213,228,253,1)" x="180" y="72" height="16" width="16"></rect>
<rect class="square hour-11 day-4" fill="rgba(213,228,253,1)" x="198" y="72" height="16" width="16"></rect>
<rect class="square hour-12 day-4" fill="rgba(171,201,250,1)" x="216" y="72" height="16" width="16"></rect>
<rect class="square hour-13 day-4" fill="rgba(171,201,250,1)" x="234" y="72" height="16" width="16"></rect>
<rect class="square hour-14 day-4" fill="rgba(129,174,248,1)" x="252" y="72" height="16" width="16"></rect>
<rect class="square hour-15 day-4" fill="rgba(213,228,253,1)" x="270" y="72" height="16" width="16"></rect>
<rect class="square hour-16 day-4" fill="rgba(255,255,255,1)" x="288" y="72" height="16" width="16"></rect>
<rect class="square hour-17 day-4" fill="rgba(245,248,254,1)" x="306" y="72" height="16" width="16"></rect>
<rect class="square hour-18 day-4" fill="rgba(203,221,252,1)" x="324" y="72" height="16" width="16"></rect>
<rect class="square hour-19 day-4" fill="rgba(192,214,251,1)" x="342" y="72" height="16" width="16"></rect>
<rect class="square hour-20 day-4" fill="rgba(182,208,251,1)" x="360" y="72" height="16" width="16"></rect>
<rect class="square hour-21 day-4" fill="rgba(171,201,250,1)" x="378" y="72" height="16" width="16"></rect>
<rect class="square hour-22 day-4" fill="rgba(224,235,253,1)" x="396" y="72" height="16" width="16"></rect>
<rect class="square hour-23 day-4" fill="rgba(234,241,254,1)" x="414" y="72" height="16" width="16"></rect>
<rect class="square hour-0 day-5" fill="rgba(245,248,254,1)" x="0" y="90" height="16" width="16"></rect>
<rect class="square hour-1 day-5" fill="rgba(245,248,254,1)" x="18" y="90" height="16" width="16"></rect>
<rect class="square hour-2 day-5" fill="rgba(255,255,255,1)" x="36" y="90" height="16" width="16"></rect>
<rect class="square hour-3 day-5" fill="rgba(255,255,255,1)" x="54" y="90" height="16" width="16"></rect>
<rect class="square hour-4 day-5" fill="rgba(255,255,255,1)" x="72" y="90" height="16" width="16"></rect>
<rect class="square hour-5 day-5" fill="rgba(255,255,255,1)" x="90" y="90" height="16" width="16"></rect>
<rect class="square hour-6 day-5" fill="rgba(255,255,255,1)" x="108" y="90" height="16" width="16"></rect>
<rect class="square hour-7 day-5" fill="rgba(213,228,253,1)" x="126" y="90" height="16" width="16"></rect>
<rect class="square hour-8 day-5" fill="rgba(224,235,253,1)" x="144" y="90" height="16" width="16"></rect>
<rect class="square hour-9 day-5" fill="rgba(182,208,251,1)" x="162" y="90" height="16" width="16"></rect>
<rect class="square hour-10 day-5" fill="rgba(161,194,250,1)" x="180" y="90" height="16" width="16"></rect>
<rect class="square hour-11 day-5" fill="rgba(203,221,252,1)" x="198" y="90" height="16" width="16"></rect>
<rect class="square hour-12 day-5" fill="rgba(182,208,251,1)" x="216" y="90" height="16" width="16"></rect>
<rect class="square hour-13 day-5" fill="rgba(234,241,254,1)" x="234" y="90" height="16" width="16"></rect>
<rect class="square hour-14 day-5" fill="rgba(192,214,251,1)" x="252" y="90" height="16" width="16"></rect>
<rect class="square hour-15 day-5" fill="rgba(192,214,251,1)" x="270" y="90" height="16" width="16"></rect>
<rect class="square hour-16 day-5" fill="rgba(224,235,253,1)" x="288" y="90" height="16" width="16"></rect>
<rect class="square hour-17 day-5" fill="rgba(234,241,254,1)" x="306" y="90" height="16" width="16"></rect>
<rect class="square hour-18 day-5" fill="rgba(224,235,253,1)" x="324" y="90" height="16" width="16"></rect>
<rect class="square hour-19 day-5" fill="rgba(234,241,254,1)" x="342" y="90" height="16" width="16"></rect>
<rect class="square hour-20 day-5" fill="rgba(224,235,253,1)" x="360" y="90" height="16" width="16"></rect>
<rect class="square hour-21 day-5" fill="rgba(203,221,252,1)" x="378" y="90" height="16" width="16"></rect>
<rect class="square hour-22 day-5" fill="rgba(213,228,253,1)" x="396" y="90" height="16" width="16"></rect>
<rect class="square hour-23 day-5" fill="rgba(203,221,252,1)" x="414" y="90" height="16" width="16"></rect>
<rect id="a_bor001" x="0" y="108" height="16" width="16" fill="none" stroke="#222" style="display: none;"></rect>
<rect id="a_bor002" x="18" y="108" height="16" width="16" fill="none" stroke="#222" style="display: none;"></rect>
<rect id="a_bor003" x="36" y="108" height="16" width="16" fill="none" stroke="#222" style="display: none;"></rect>
</g>
</g>
</svg>
</div>
<div class="b_act_p_1" id="a_p001" style="display: none;">Testtt</div>
<div class="b_act_p_2" id="a_p002" style="display: none;">Testtt</div>
<div class="b_act_p_3" id="a_p003" style="display: none;">Testtt</div>
JSFiddle。对于每个单独的块，我想显示新的弹出窗口。总共 168 个独特的弹出窗口。
我有下面的脚本：
<script>
$("#a_b001").mouseover(function() {
$("#a_p001").show();
$("#a_bor001").show();
}).mouseout(function() {
$("#a_p001").hide();
$("#a_bor001").hide();
});
</script>
我正在尝试重复此脚本最多 100 个连续数字，例如：
（001、002、003、004、...、098、099、100）。在这个重复中可以使用for吗？
<script>
$("#a_b001").mouseover(function() {
$("#a_p001").show();
$("#a_bor001").show();
}).mouseout(function() {
$("#a_p001").hide();
$("#a_bor001").hide();
});
$("#a_b002").mouseover(function() {
$("#a_p002").show();
$("#a_bor002").show();
}).mouseout(function() {
$("#a_p002").hide();
$("#a_bor002").hide();
});
$("#a_b003").mouseover(function() {
$("#a_p003").show();
$("#a_bor003").show();
}).mouseout(function() {
$("#a_p003").hide();
$("#a_bor003").hide();
});
...
</script>
也许你应该试试下面的逻辑。
<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>
我给你写了一个例子。
$(".myclass").mouseover(function() {
var index=$(this).attr('index');
$("#p_"+index).show();
$("#bor_"+index).show();
}).mouseout(function() {
var index=$(this).attr('index');
$("#p_"+index).hide();
$("#bor_"+index).hide();
});
.hidden{
display:none;
}
.myclass{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td index='1' class='myclass'>a</td>
<td id='p_1' class='hidden'>aa</td>
<td id='bor_1' class='hidden'>aaa</td>
</tr>
<tr>
<td index='2' class='myclass'>b</td>
<td id='p_2' class='hidden'>bb</td>
<td id='bor_2' class='hidden'>bbb</td>
</tr>
<tr>
<td index='3' class='myclass'>c</td>
<td id='p_3' class='hidden'>cc</td>
<td id='bor_3' class='hidden'>ccc</td>
</tr>
<tr>
<td index='4' class='myclass'>d</td>
<td id='p_4' class='hidden'>dd</td>
<td id='bor_4' class='hidden'>ddd</td>
</tr>
</table>
使用下面的例子
这些是您的悬停元素。每个都包含 data-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>
这些是hide/showdiv的
<div class="b_act_p" id="a_p001" style="display: none;">Testtt</div>
<div class="b_act_p" id="a_bor001" style="display: none;">Testtt</div>
<div class="b_act_p" id="a_p002" style="display: none;">Testtt</div>
<div class="b_act_p" id="a_bor002" style="display: none;">Testtt</div>
<div class="b_act_p" id="a_p003" style="display: none;">Testtt</div>
<div class="b_act_p" id="a_bor003" style="display: none;">Testtt</div>
这是js函数
$(".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();
});
与其创建 N 个事件侦听器，不如根据 class.
创建 1 个
这些是具有共同行为的不同元素。通过设计，他们还应该共享一些视觉元素。
您可以创建一个 CSS class 来放置所有这些元素并添加 class 的侦听器。假设 class 是 'button'。
然后像这样的事情应该做。
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();
});
$("#a_b001").mouseover(function() {
$("#a_p001").show();
$("#a_bor001").show();
}).mouseout(function() {
$("#a_p001").hide();
$("#a_bor001").hide();
});
$("#a_b002").mouseover(function() {
$("#a_p002").show();
$("#a_bor002").show();
}).mouseout(function() {
$("#a_p002").hide();
$("#a_bor002").hide();
});
$("#a_b003").mouseover(function() {
$("#a_p003").show();
$("#a_bor003").show();
}).mouseout(function() {
$("#a_p003").hide();
$("#a_bor001").hide();
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.b_act_p_1 {
position: absolute;
border: 1px solid #e9e9e9;
width: 150px;
background: #fff;
height: 100px;
padding: 10px;
top: 124px;
left: -104px;
}
.b_act_p_2 {
position: absolute;
border: 1px solid #e9e9e9;
width: 150px;
background: #fff;
height: 100px;
padding: 10px;
top: 124px;
left: -90px;
}
.b_act_p_3 {
position: absolute;
border: 1px solid #e9e9e9;
width: 150px;
background: #fff;
height: 100px;
padding: 10px;
top: 124px;
left: -74px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart-frame top_s_b_d" id="b_seg_c">
<svg width="488" height="168">
<g transform="translate(16 16)">
<g class="hour-axis" transform="translate(18 124)" opacity="1">
<g transform="translate(-0.5 0)">
<line y2="4" stroke="#9e9e9e" shape-rendering="crispEdges"></line>
<text y="8" fill="#9e9e9e" dominant-baseline="hanging" text-anchor="start">12 AM</text>
</g>
<g transform="translate(107.5 0)">
<line y2="4" stroke="#9e9e9e" shape-rendering="crispEdges"></line>
<text y="8" fill="#9e9e9e" dominant-baseline="hanging" text-anchor="middle">6 AM</text>
</g>
<g transform="translate(215.5 0)">
<line y2="4" stroke="#9e9e9e" shape-rendering="crispEdges"></line>
<text y="8" fill="#9e9e9e" dominant-baseline="hanging" text-anchor="middle">12 PM</text>
</g>
<g transform="translate(323.5 0)">
<line y2="4" stroke="#9e9e9e" shape-rendering="crispEdges"></line>
<text y="8" fill="#9e9e9e" dominant-baseline="hanging" text-anchor="middle">6 PM</text>
</g>
<g transform="translate(431.5 0)">
<line y2="4" stroke="#9e9e9e" shape-rendering="crispEdges"></line>
<text y="8" fill="#9e9e9e" dominant-baseline="hanging" text-anchor="end">12 AM</text>
</g>
<line x1="-4" x2="434" y1="0.5" y2="0.5" stroke="#9e9e9e"></line>
</g>
<g class="day-axis" opacity="1">
<text y="8" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">M</text>
<text y="26" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">T</text>
<text y="44" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">W</text>
<text y="62" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">T</text>
<text y="80" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">F</text>
<text y="98" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">S</text>
<text y="116" x="12" fill="#9e9e9e" text-anchor="end" dominant-baseline="middle">S</text>
<line x1="17.5" x2="17.5" y1="-4" y2="128" stroke="#9e9e9e"></line>
</g>
<g transform="translate(18 0)" class="square-area">
<rect 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 id="a_b002" class="square hour-1 day-6" fill="rgba(255,255,255,1)" x="18" y="108" style="border: 2px #333 solid;" height="16" width="16"></rect>
<rect 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 class="square hour-3 day-6" fill="rgba(255,255,255,1)" x="54" y="108" height="16" width="16"></rect>
<rect class="square hour-4 day-6" fill="rgba(255,255,255,1)" x="72" y="108" height="16" width="16"></rect>
<rect class="square hour-5 day-6" fill="rgba(255,255,255,1)" x="90" y="108" height="16" width="16"></rect>
<rect class="square hour-6 day-6" fill="rgba(224,235,253,1)" x="108" y="108" height="16" width="16"></rect>
<rect class="square hour-7 day-6" fill="rgba(213,228,253,1)" x="126" y="108" height="16" width="16"></rect>
<rect class="square hour-8 day-6" fill="rgba(213,228,253,1)" x="144" y="108" height="16" width="16"></rect>
<rect class="square hour-9 day-6" fill="rgba(234,241,254,1)" x="162" y="108" height="16" width="16"></rect>
<rect class="square hour-10 day-6" fill="rgba(213,228,253,1)" x="180" y="108" height="16" width="16"></rect>
<rect class="square hour-11 day-6" fill="rgba(224,235,253,1)" x="198" y="108" height="16" width="16"></rect>
<rect class="square hour-12 day-6" fill="rgba(213,228,253,1)" x="216" y="108" height="16" width="16"></rect>
<rect class="square hour-13 day-6" fill="rgba(192,214,251,1)" x="234" y="108" height="16" width="16"></rect>
<rect class="square hour-14 day-6" fill="rgba(213,228,253,1)" x="252" y="108" height="16" width="16"></rect>
<rect class="square hour-15 day-6" fill="rgba(171,201,250,1)" x="270" y="108" height="16" width="16"></rect>
<rect class="square hour-16 day-6" fill="rgba(203,221,252,1)" x="288" y="108" height="16" width="16"></rect>
<rect class="square hour-17 day-6" fill="rgba(192,214,251,1)" x="306" y="108" height="16" width="16"></rect>
<rect class="square hour-18 day-6" fill="rgba(213,228,253,1)" x="324" y="108" height="16" width="16"></rect>
<rect class="square hour-19 day-6" fill="rgba(192,214,251,1)" x="342" y="108" height="16" width="16"></rect>
<rect class="square hour-20 day-6" fill="rgba(161,194,250,1)" x="360" y="108" height="16" width="16"></rect>
<rect class="square hour-21 day-6" fill="rgba(150,187,249,1)" x="378" y="108" height="16" width="16"></rect>
<rect class="square hour-22 day-6" fill="rgba(98,153,246,1)" x="396" y="108" height="16" width="16"></rect>
<rect class="square hour-23 day-6" fill="rgba(192,214,251,1)" x="414" y="108" height="16" width="16"></rect>
<rect class="square hour-0 day-0" fill="rgba(245,248,254,1)" x="0" y="0" height="16" width="16"></rect>
<rect class="square hour-1 day-0" fill="rgba(245,248,254,1)" x="18" y="0" height="16" width="16"></rect>
<rect class="square hour-2 day-0" fill="rgba(234,241,254,1)" x="36" y="0" height="16" width="16"></rect>
<rect class="square hour-3 day-0" fill="rgba(255,255,255,1)" x="54" y="0" height="16" width="16"></rect>
<rect class="square hour-4 day-0" fill="rgba(255,255,255,1)" x="72" y="0" height="16" width="16"></rect>
<rect class="square hour-5 day-0" fill="rgba(255,255,255,1)" x="90" y="0" height="16" width="16"></rect>
<rect class="square hour-6 day-0" fill="rgba(255,255,255,1)" x="108" y="0" height="16" width="16"></rect>
<rect class="square hour-7 day-0" fill="rgba(234,241,254,1)" x="126" y="0" height="16" width="16"></rect>
<rect class="square hour-8 day-0" fill="rgba(224,235,253,1)" x="144" y="0" height="16" width="16"></rect>
<rect class="square hour-9 day-0" fill="rgba(234,241,254,1)" x="162" y="0" height="16" width="16"></rect>
<rect class="square hour-10 day-0" fill="rgba(213,228,253,1)" x="180" y="0" height="16" width="16"></rect>
<rect class="square hour-11 day-0" fill="rgba(203,221,252,1)" x="198" y="0" height="16" width="16"></rect>
<rect class="square hour-12 day-0" fill="rgba(213,228,253,1)" x="216" y="0" height="16" width="16"></rect>
<rect class="square hour-13 day-0" fill="rgba(192,214,251,1)" x="234" y="0" height="16" width="16"></rect>
<rect class="square hour-14 day-0" fill="rgba(192,214,251,1)" x="252" y="0" height="16" width="16"></rect>
<rect class="square hour-15 day-0" fill="rgba(161,194,250,1)" x="270" y="0" height="16" width="16"></rect>
<rect class="square hour-16 day-0" fill="rgba(213,228,253,1)" x="288" y="0" height="16" width="16"></rect>
<rect class="square hour-17 day-0" fill="rgba(234,241,254,1)" x="306" y="0" height="16" width="16"></rect>
<rect class="square hour-18 day-0" fill="rgba(203,221,252,1)" x="324" y="0" height="16" width="16"></rect>
<rect class="square hour-19 day-0" fill="rgba(182,208,251,1)" x="342" y="0" height="16" width="16"></rect>
<rect class="square hour-20 day-0" fill="rgba(255,255,255,1)" x="360" y="0" height="16" width="16"></rect>
<rect class="square hour-21 day-0" fill="rgba(171,201,250,1)" x="378" y="0" height="16" width="16"></rect>
<rect class="square hour-22 day-0" fill="rgba(203,221,252,1)" x="396" y="0" height="16" width="16"></rect>
<rect class="square hour-23 day-0" fill="rgba(66,133,244,1)" x="414" y="0" height="16" width="16"></rect>
<rect class="square hour-0 day-1" fill="rgba(234,241,254,1)" x="0" y="18" height="16" width="16"></rect>
<rect class="square hour-1 day-1" fill="rgba(213,228,253,1)" x="18" y="18" height="16" width="16"></rect>
<rect class="square hour-2 day-1" fill="rgba(255,255,255,1)" x="36" y="18" height="16" width="16"></rect>
<rect class="square hour-3 day-1" fill="rgba(255,255,255,1)" x="54" y="18" height="16" width="16"></rect>
<rect class="square hour-4 day-1" fill="rgba(255,255,255,1)" x="72" y="18" height="16" width="16"></rect>
<rect class="square hour-5 day-1" fill="rgba(245,248,254,1)" x="90" y="18" height="16" width="16"></rect>
<rect class="square hour-6 day-1" fill="rgba(255,255,255,1)" x="108" y="18" height="16" width="16"></rect>
<rect class="square hour-7 day-1" fill="rgba(224,235,253,1)" x="126" y="18" height="16" width="16"></rect>
<rect class="square hour-8 day-1" fill="rgba(255,255,255,1)" x="144" y="18" height="16" width="16"></rect>
<rect class="square hour-9 day-1" fill="rgba(255,255,255,1)" x="162" y="18" height="16" width="16"></rect>
<rect class="square hour-10 day-1" fill="rgba(182,208,251,1)" x="180" y="18" height="16" width="16"></rect>
<rect class="square hour-11 day-1" fill="rgba(161,194,250,1)" x="198" y="18" height="16" width="16"></rect>
<rect class="square hour-12 day-1" fill="rgba(224,235,253,1)" x="216" y="18" height="16" width="16"></rect>
<rect class="square hour-13 day-1" fill="rgba(255,255,255,1)" x="234" y="18" height="16" width="16"></rect>
<rect class="square hour-14 day-1" fill="rgba(192,214,251,1)" x="252" y="18" height="16" width="16"></rect>
<rect class="square hour-15 day-1" fill="rgba(245,248,254,1)" x="270" y="18" height="16" width="16"></rect>
<rect class="square hour-16 day-1" fill="rgba(224,235,253,1)" x="288" y="18" height="16" width="16"></rect>
<rect class="square hour-17 day-1" fill="rgba(245,248,254,1)" x="306" y="18" height="16" width="16"></rect>
<rect class="square hour-18 day-1" fill="rgba(203,221,252,1)" x="324" y="18" height="16" width="16"></rect>
<rect class="square hour-19 day-1" fill="rgba(192,214,251,1)" x="342" y="18" height="16" width="16"></rect>
<rect class="square hour-20 day-1" fill="rgba(203,221,252,1)" x="360" y="18" height="16" width="16"></rect>
<rect class="square hour-21 day-1" fill="rgba(213,228,253,1)" x="378" y="18" height="16" width="16"></rect>
<rect class="square hour-22 day-1" fill="rgba(171,201,250,1)" x="396" y="18" height="16" width="16"></rect>
<rect class="square hour-23 day-1" fill="rgba(224,235,253,1)" x="414" y="18" height="16" width="16"></rect>
<rect class="square hour-0 day-2" fill="rgba(234,241,254,1)" x="0" y="36" height="16" width="16"></rect>
<rect class="square hour-1 day-2" fill="rgba(255,255,255,1)" x="18" y="36" height="16" width="16"></rect>
<rect class="square hour-2 day-2" fill="rgba(255,255,255,1)" x="36" y="36" height="16" width="16"></rect>
<rect class="square hour-3 day-2" fill="rgba(255,255,255,1)" x="54" y="36" height="16" width="16"></rect>
<rect class="square hour-4 day-2" fill="rgba(245,248,254,1)" x="72" y="36" height="16" width="16"></rect>
<rect class="square hour-5 day-2" fill="rgba(255,255,255,1)" x="90" y="36" height="16" width="16"></rect>
<rect class="square hour-6 day-2" fill="rgba(255,255,255,1)" x="108" y="36" height="16" width="16"></rect>
<rect class="square hour-7 day-2" fill="rgba(255,255,255,1)" x="126" y="36" height="16" width="16"></rect>
<rect class="square hour-8 day-2" fill="rgba(234,241,254,1)" x="144" y="36" height="16" width="16"></rect>
<rect class="square hour-9 day-2" fill="rgba(224,235,253,1)" x="162" y="36" height="16" width="16"></rect>
<rect class="square hour-10 day-2" fill="rgba(213,228,253,1)" x="180" y="36" height="16" width="16"></rect>
<rect class="square hour-11 day-2" fill="rgba(213,228,253,1)" x="198" y="36" height="16" width="16"></rect>
<rect class="square hour-12 day-2" fill="rgba(171,201,250,1)" x="216" y="36" height="16" width="16"></rect>
<rect class="square hour-13 day-2" fill="rgba(150,187,249,1)" x="234" y="36" height="16" width="16"></rect>
<rect class="square hour-14 day-2" fill="rgba(213,228,253,1)" x="252" y="36" height="16" width="16"></rect>
<rect class="square hour-15 day-2" fill="rgba(234,241,254,1)" x="270" y="36" height="16" width="16"></rect>
<rect class="square hour-16 day-2" fill="rgba(161,194,250,1)" x="288" y="36" height="16" width="16"></rect>
<rect class="square hour-17 day-2" fill="rgba(224,235,253,1)" x="306" y="36" height="16" width="16"></rect>
<rect class="square hour-18 day-2" fill="rgba(161,194,250,1)" x="324" y="36" height="16" width="16"></rect>
<rect class="square hour-19 day-2" fill="rgba(213,228,253,1)" x="342" y="36" height="16" width="16"></rect>
<rect class="square hour-20 day-2" fill="rgba(245,248,254,1)" x="360" y="36" height="16" width="16"></rect>
<rect class="square hour-21 day-2" fill="rgba(171,201,250,1)" x="378" y="36" height="16" width="16"></rect>
<rect class="square hour-22 day-2" fill="rgba(182,208,251,1)" x="396" y="36" height="16" width="16"></rect>
<rect class="square hour-23 day-2" fill="rgba(213,228,253,1)" x="414" y="36" height="16" width="16"></rect>
<rect class="square hour-0 day-3" fill="rgba(245,248,254,1)" x="0" y="54" height="16" width="16"></rect>
<rect class="square hour-1 day-3" fill="rgba(255,255,255,1)" x="18" y="54" height="16" width="16"></rect>
<rect class="square hour-2 day-3" fill="rgba(255,255,255,1)" x="36" y="54" height="16" width="16"></rect>
<rect class="square hour-3 day-3" fill="rgba(255,255,255,1)" x="54" y="54" height="16" width="16"></rect>
<rect class="square hour-4 day-3" fill="rgba(255,255,255,1)" x="72" y="54" height="16" width="16"></rect>
<rect class="square hour-5 day-3" fill="rgba(255,255,255,1)" x="90" y="54" height="16" width="16"></rect>
<rect class="square hour-6 day-3" fill="rgba(255,255,255,1)" x="108" y="54" height="16" width="16"></rect>
<rect class="square hour-7 day-3" fill="rgba(192,214,251,1)" x="126" y="54" height="16" width="16"></rect>
<rect class="square hour-8 day-3" fill="rgba(224,235,253,1)" x="144" y="54" height="16" width="16"></rect>
<rect class="square hour-9 day-3" fill="rgba(234,241,254,1)" x="162" y="54" height="16" width="16"></rect>
<rect class="square hour-10 day-3" fill="rgba(224,235,253,1)" x="180" y="54" height="16" width="16"></rect>
<rect class="square hour-11 day-3" fill="rgba(224,235,253,1)" x="198" y="54" height="16" width="16"></rect>
<rect class="square hour-12 day-3" fill="rgba(234,241,254,1)" x="216" y="54" height="16" width="16"></rect>
<rect class="square hour-13 day-3" fill="rgba(203,221,252,1)" x="234" y="54" height="16" width="16"></rect>
<rect class="square hour-14 day-3" fill="rgba(224,235,253,1)" x="252" y="54" height="16" width="16"></rect>
<rect class="square hour-15 day-3" fill="rgba(171,201,250,1)" x="270" y="54" height="16" width="16"></rect>
<rect class="square hour-16 day-3" fill="rgba(171,201,250,1)" x="288" y="54" height="16" width="16"></rect>
<rect class="square hour-17 day-3" fill="rgba(213,228,253,1)" x="306" y="54" height="16" width="16"></rect>
<rect class="square hour-18 day-3" fill="rgba(234,241,254,1)" x="324" y="54" height="16" width="16"></rect>
<rect class="square hour-19 day-3" fill="rgba(234,241,254,1)" x="342" y="54" height="16" width="16"></rect>
<rect class="square hour-20 day-3" fill="rgba(224,235,253,1)" x="360" y="54" height="16" width="16"></rect>
<rect class="square hour-21 day-3" fill="rgba(224,235,253,1)" x="378" y="54" height="16" width="16"></rect>
<rect class="square hour-22 day-3" fill="rgba(192,214,251,1)" x="396" y="54" height="16" width="16"></rect>
<rect class="square hour-23 day-3" fill="rgba(203,221,252,1)" x="414" y="54" height="16" width="16"></rect>
<rect class="square hour-0 day-4" fill="rgba(255,255,255,1)" x="0" y="72" height="16" width="16"></rect>
<rect class="square hour-1 day-4" fill="rgba(255,255,255,1)" x="18" y="72" height="16" width="16"></rect>
<rect class="square hour-2 day-4" fill="rgba(255,255,255,1)" x="36" y="72" height="16" width="16"></rect>
<rect class="square hour-3 day-4" fill="rgba(255,255,255,1)" x="54" y="72" height="16" width="16"></rect>
<rect class="square hour-4 day-4" fill="rgba(255,255,255,1)" x="72" y="72" height="16" width="16"></rect>
<rect class="square hour-5 day-4" fill="rgba(234,241,254,1)" x="90" y="72" height="16" width="16"></rect>
<rect class="square hour-6 day-4" fill="rgba(245,248,254,1)" x="108" y="72" height="16" width="16"></rect>
<rect class="square hour-7 day-4" fill="rgba(245,248,254,1)" x="126" y="72" height="16" width="16"></rect>
<rect class="square hour-8 day-4" fill="rgba(245,248,254,1)" x="144" y="72" height="16" width="16"></rect>
<rect class="square hour-9 day-4" fill="rgba(203,221,252,1)" x="162" y="72" height="16" width="16"></rect>
<rect class="square hour-10 day-4" fill="rgba(213,228,253,1)" x="180" y="72" height="16" width="16"></rect>
<rect class="square hour-11 day-4" fill="rgba(213,228,253,1)" x="198" y="72" height="16" width="16"></rect>
<rect class="square hour-12 day-4" fill="rgba(171,201,250,1)" x="216" y="72" height="16" width="16"></rect>
<rect class="square hour-13 day-4" fill="rgba(171,201,250,1)" x="234" y="72" height="16" width="16"></rect>
<rect class="square hour-14 day-4" fill="rgba(129,174,248,1)" x="252" y="72" height="16" width="16"></rect>
<rect class="square hour-15 day-4" fill="rgba(213,228,253,1)" x="270" y="72" height="16" width="16"></rect>
<rect class="square hour-16 day-4" fill="rgba(255,255,255,1)" x="288" y="72" height="16" width="16"></rect>
<rect class="square hour-17 day-4" fill="rgba(245,248,254,1)" x="306" y="72" height="16" width="16"></rect>
<rect class="square hour-18 day-4" fill="rgba(203,221,252,1)" x="324" y="72" height="16" width="16"></rect>
<rect class="square hour-19 day-4" fill="rgba(192,214,251,1)" x="342" y="72" height="16" width="16"></rect>
<rect class="square hour-20 day-4" fill="rgba(182,208,251,1)" x="360" y="72" height="16" width="16"></rect>
<rect class="square hour-21 day-4" fill="rgba(171,201,250,1)" x="378" y="72" height="16" width="16"></rect>
<rect class="square hour-22 day-4" fill="rgba(224,235,253,1)" x="396" y="72" height="16" width="16"></rect>
<rect class="square hour-23 day-4" fill="rgba(234,241,254,1)" x="414" y="72" height="16" width="16"></rect>
<rect class="square hour-0 day-5" fill="rgba(245,248,254,1)" x="0" y="90" height="16" width="16"></rect>
<rect class="square hour-1 day-5" fill="rgba(245,248,254,1)" x="18" y="90" height="16" width="16"></rect>
<rect class="square hour-2 day-5" fill="rgba(255,255,255,1)" x="36" y="90" height="16" width="16"></rect>
<rect class="square hour-3 day-5" fill="rgba(255,255,255,1)" x="54" y="90" height="16" width="16"></rect>
<rect class="square hour-4 day-5" fill="rgba(255,255,255,1)" x="72" y="90" height="16" width="16"></rect>
<rect class="square hour-5 day-5" fill="rgba(255,255,255,1)" x="90" y="90" height="16" width="16"></rect>
<rect class="square hour-6 day-5" fill="rgba(255,255,255,1)" x="108" y="90" height="16" width="16"></rect>
<rect class="square hour-7 day-5" fill="rgba(213,228,253,1)" x="126" y="90" height="16" width="16"></rect>
<rect class="square hour-8 day-5" fill="rgba(224,235,253,1)" x="144" y="90" height="16" width="16"></rect>
<rect class="square hour-9 day-5" fill="rgba(182,208,251,1)" x="162" y="90" height="16" width="16"></rect>
<rect class="square hour-10 day-5" fill="rgba(161,194,250,1)" x="180" y="90" height="16" width="16"></rect>
<rect class="square hour-11 day-5" fill="rgba(203,221,252,1)" x="198" y="90" height="16" width="16"></rect>
<rect class="square hour-12 day-5" fill="rgba(182,208,251,1)" x="216" y="90" height="16" width="16"></rect>
<rect class="square hour-13 day-5" fill="rgba(234,241,254,1)" x="234" y="90" height="16" width="16"></rect>
<rect class="square hour-14 day-5" fill="rgba(192,214,251,1)" x="252" y="90" height="16" width="16"></rect>
<rect class="square hour-15 day-5" fill="rgba(192,214,251,1)" x="270" y="90" height="16" width="16"></rect>
<rect class="square hour-16 day-5" fill="rgba(224,235,253,1)" x="288" y="90" height="16" width="16"></rect>
<rect class="square hour-17 day-5" fill="rgba(234,241,254,1)" x="306" y="90" height="16" width="16"></rect>
<rect class="square hour-18 day-5" fill="rgba(224,235,253,1)" x="324" y="90" height="16" width="16"></rect>
<rect class="square hour-19 day-5" fill="rgba(234,241,254,1)" x="342" y="90" height="16" width="16"></rect>
<rect class="square hour-20 day-5" fill="rgba(224,235,253,1)" x="360" y="90" height="16" width="16"></rect>
<rect class="square hour-21 day-5" fill="rgba(203,221,252,1)" x="378" y="90" height="16" width="16"></rect>
<rect class="square hour-22 day-5" fill="rgba(213,228,253,1)" x="396" y="90" height="16" width="16"></rect>
<rect class="square hour-23 day-5" fill="rgba(203,221,252,1)" x="414" y="90" height="16" width="16"></rect>
<rect id="a_bor001" x="0" y="108" height="16" width="16" fill="none" stroke="#222" style="display: none;"></rect>
<rect id="a_bor002" x="18" y="108" height="16" width="16" fill="none" stroke="#222" style="display: none;"></rect>
<rect id="a_bor003" x="36" y="108" height="16" width="16" fill="none" stroke="#222" style="display: none;"></rect>
</g>
</g>
</svg>
</div>
<div class="b_act_p_1" id="a_p001" style="display: none;">Testtt</div>
<div class="b_act_p_2" id="a_p002" style="display: none;">Testtt</div>
<div class="b_act_p_3" id="a_p003" style="display: none;">Testtt</div>
JSFiddle。对于每个单独的块，我想显示新的弹出窗口。总共 168 个独特的弹出窗口。
我有下面的脚本：
<script>
$("#a_b001").mouseover(function() {
$("#a_p001").show();
$("#a_bor001").show();
}).mouseout(function() {
$("#a_p001").hide();
$("#a_bor001").hide();
});
</script>
我正在尝试重复此脚本最多 100 个连续数字，例如：
（001、002、003、004、...、098、099、100）。在这个重复中可以使用for吗？
<script>
$("#a_b001").mouseover(function() {
$("#a_p001").show();
$("#a_bor001").show();
}).mouseout(function() {
$("#a_p001").hide();
$("#a_bor001").hide();
});
$("#a_b002").mouseover(function() {
$("#a_p002").show();
$("#a_bor002").show();
}).mouseout(function() {
$("#a_p002").hide();
$("#a_bor002").hide();
});
$("#a_b003").mouseover(function() {
$("#a_p003").show();
$("#a_bor003").show();
}).mouseout(function() {
$("#a_p003").hide();
$("#a_bor003").hide();
});
...
</script>
也许你应该试试下面的逻辑。
<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>
我给你写了一个例子。
$(".myclass").mouseover(function() {
var index=$(this).attr('index');
$("#p_"+index).show();
$("#bor_"+index).show();
}).mouseout(function() {
var index=$(this).attr('index');
$("#p_"+index).hide();
$("#bor_"+index).hide();
});
.hidden{
display:none;
}
.myclass{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td index='1' class='myclass'>a</td>
<td id='p_1' class='hidden'>aa</td>
<td id='bor_1' class='hidden'>aaa</td>
</tr>
<tr>
<td index='2' class='myclass'>b</td>
<td id='p_2' class='hidden'>bb</td>
<td id='bor_2' class='hidden'>bbb</td>
</tr>
<tr>
<td index='3' class='myclass'>c</td>
<td id='p_3' class='hidden'>cc</td>
<td id='bor_3' class='hidden'>ccc</td>
</tr>
<tr>
<td index='4' class='myclass'>d</td>
<td id='p_4' class='hidden'>dd</td>
<td id='bor_4' class='hidden'>ddd</td>
</tr>
</table>
使用下面的例子
这些是您的悬停元素。每个都包含 data-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>
这些是hide/showdiv的
<div class="b_act_p" id="a_p001" style="display: none;">Testtt</div>
<div class="b_act_p" id="a_bor001" style="display: none;">Testtt</div>
<div class="b_act_p" id="a_p002" style="display: none;">Testtt</div>
<div class="b_act_p" id="a_bor002" style="display: none;">Testtt</div>
<div class="b_act_p" id="a_p003" style="display: none;">Testtt</div>
<div class="b_act_p" id="a_bor003" style="display: none;">Testtt</div>
这是js函数
$(".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();
});
与其创建 N 个事件侦听器，不如根据 class.
创建 1 个这些是具有共同行为的不同元素。通过设计，他们还应该共享一些视觉元素。
您可以创建一个 CSS class 来放置所有这些元素并添加 class 的侦听器。假设 class 是 'button'。 然后像这样的事情应该做。
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();
});