Question

我创建了一个mousemove函数，当观众将鼠标光标放在我绘制在地图图形上的点上时，显示自定义弹出窗口。我创造的作品很好，但我想知道我能以更好的方式做到这一点;可能使用循环。弹出窗口内显示的元素来自JSON文件。我为地图上绘制的每个点创建了一个mousemove事件。我写它的方式看起来像很多代码，我认为可能有更好的方法。有人能给我一个更好的方法来做这个概念吗？提前谢谢。

这是我的HTML

<div class="toolTip">
    <div class="closeBtn">
        X
    </div>
    <h3>Title</h3>
    <p>Paragraph text</p>
    <div class="image">
        <a class="various fancybox.iframe fancybox-button iframe fancybox" href="page3.html" title="Leo Under the Blanket"><img alt="Image" src="graphics/leoBlanket.jpg"></a>
    </div>
</div><!--Close of Tooltip-->
<div id="container">
    <section id="focal">
        <div id="wrapper">
            <div class="parent">
                <div class="panzoom">
                    <div id="content">
                        <svg height="aut0" version="1.1" viewbox="0 0 1000 650" width="100%" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
                        <g id="map"></g>
                        <g id="points">
                            <circle class="point4" cx="169.71" cy="160.985" fill="#006838" r="7.971"></circle>
                            <circle class="point5" cx="626.957" cy="93.594" fill="#006838" r="7.971"></circle>
                            <circle class="point6" cx="476.232" cy="250.841" fill="#006838" r="7.971"></circle>
                        </g></svg>
                        <div class="point point1"><img alt="Image" src="graphics/pointIcon.png"></div>
                        <div class="point point2"><img alt="Image" src="graphics/pointIcon.png"></div>
                        <div class="point point3"><img alt="Image" src="graphics/pointIcon.png"></div>
                    </div><!--Close of Content-->
                </div><!--pan zoom-->
            </div><!--parent-->
        </div><!--Wrapper-->
    </section><button class="zoom-in">+</button> <button class="zoom-out">-</button> <input class="zoom-range" type="range"><!----> <button class="reset">1:1</button><br>
</div><!--Close of Container-->

我的JavaScript

$('.point1').mousemove(function(event) {
$('.toolTip').css({
    top: event.clientY,
    left: event.clientX
}).show(); //position tooltip location
$(".toolTip h3").html(json.nodes[0].title); //add title from json file
$(".toolTip p").html(json.nodes[0].paraTxt); //add paragraph text from
json file
$(".toolTip img").attr("src", json.nodes[0].image); //add image from json
file
$(".toolTip a").attr("href", json.nodes[0].popupImg1);
});
$('.point2').mousemove(function(event) {
    $('.toolTip').css({
        top: event.clientY,
        left: event.clientX
    }).show(); //position tooltip location
    $(".toolTip h3").html(json.nodes[1].title); //add title from json file
    $(".toolTip p").html(json.nodes[1].paraTxt); //add paragraph text from 
    json file
    $(".toolTip img").attr("src", json.nodes[1].image); //add image from json 
    file
    $(".toolTip a").attr("href", json.nodes[1].popupImg2);
});
$('.point3').mousemove(function(event) {
    $('.toolTip').css({
        top: event.clientY,
        left: event.clientX
    }).show(); //position tooltip location
    $(".toolTip h3").html(json.nodes[2].title); //add title from json file
    $(".toolTip p").html(json.nodes[2].paraTxt); //add paragraph text from
    json file
    $(".toolTip img").attr("src", json.nodes[2].image); //add image from json
    file
    $(".toolTip a").attr("href", json.nodes[2].popupImg3);
});
$('.point4').mousemove(function(event) {
    $('.toolTip').css({
        top: event.clientY,
        left: event.clientX
    }).show(); //position tooltip location
    $(".toolTip h3").html(json.nodes[3].title); //add title from json file
    $(".toolTip p").html(json.nodes[3].paraTxt); //add paragraph text from
    json file
    $(".toolTip img").attr("src", json.nodes[3].image); //add image from json
    file
    $(".toolTip a").attr("href", json.nodes[3].popupImg4);
});
$('.point5').mousemove(function(event) {
    $('.toolTip').css({
        top: event.clientY,
        left: event.clientX
    }).show(); //position tooltip location
    $(".toolTip h3").html(json.nodes[4].title); //add title from json file
    $(".toolTip p").html(json.nodes[4].paraTxt); //add paragraph text from  
    json file
    $(".toolTip img").attr("src", json.nodes[4].image); //add image from 
    json file
    $(".toolTip a").attr("href", json.nodes[4].popupImg5);
});
$('.point6').mousemove(function(event) {
    $('.toolTip').css({
        top: event.clientY,
        left: event.clientX
    }).show(); //position tooltip location
    $(".toolTip h3").html(json.nodes[5].title); //add title from json file
    $(".toolTip p").html(json.nodes[5].paraTxt); //add paragraph text from 
    json file
    $(".toolTip img").attr("src", json.nodes[5].image); //add image from json
    file
    $(".toolTip a").attr("href", json.nodes[5].popupImg6);
});

我的JSON

var json = {
"nodes": [{
"id": 0,
"button": $('.point1'),
"popupImg": "page3.html",
"image": "graphics/leoBlanket.jpg",
"title": "point 0 ",
"paraTxt": "Snug as a bug in the blanket"
  },
{
"id": 1,
"button": $('.point2'),
"popupImg": "page3.html",
"image": "graphics/image1.jpg",
 "title": "point 1",
"paraTxt": "You got to see this view!"
}, 
{
"id": 2,
"button": $('.point3'),
"popupImg": "page3.html",
"image": "graphics/image2.jpg",
"title": "point 2",
"paraTxt": "Love the great view"
 }, 
{
"id": 3,
"button": $('.point4'),
"popupImg": "page3.html",
"image": "graphics/myMap.png",
"title": "point 3",
"paraTxt": "Love the great view"
}, 
{
"id": 4,
"button": $('.point5'),
"popupImg": "page3.html",
"image": "graphics/myMap.png",
"title": "point 4   ",
"paraTxt": "Love the great view"
}, 
{
"id": 5,
"button": $('.point6'),
"popupImg": "page3.html",
"image": "graphics/myMap.png",
"title": "point 5",
"paraTxt": "Love the great view"
}]
};

提供并修改了Loop Concept以加载JSON数据 - 不适用于所有点。如果我删除if语句，它将只显示最后一个JSON元素的JSON数据。

for (var i = 0; i < json.nodes.length; i++) {
if (i == 3) {
    json.nodes[i].button.mousemove(function(event) {
        $('.toolTip').css({
            top: event.clientY,
            left: event.clientX
        }).show(); //position tooltip location
        $(".toolTip h3").html(json.nodes[i].title); //add title from json file
        $(".toolTip p").html(json.nodes[i].paraTxt); //add paragraph text from json file
        $(".toolTip img").attr("src", json.nodes[i].image); //add image from json file
        $(".toolTip a").attr("href", json.nodes[i].popupImg[i + 1]);
    });
    break;
   }
}

Answer 1

使用for循环let可以获得所需的结果。

var points = 6;
for (let i = 0; i < points; i++) {
    $('.point' + (i + 1)).mousemove(function(event) {
    $('.toolTip').css({top: event.clientY, left: event.clientX}).show();//position tooltip location
    $(".toolTip h3").html(json.nodes[i].title);//add title from json file
    $(".toolTip p").html(json.nodes[i].paraTxt);//add paragraph text from json file
    $(".toolTip img").attr("src", json.nodes[i].image);//add image from json file
    $(".toolTip a").attr("href", json.nodes[i].popupImg[i + 1]);
    });
}

在Jaromanda X的催促下，我必须告诉你IE不喜欢let，所以为了最大程度地兼容那些运行过时浏览器的人，请使用IIFE：

var points = 6;
for (var i = 0; i < points; i++) {
    !function(i) {
        $('.point' + (i + 1)).mousemove(function(event) {
        $('.toolTip').css({top: event.clientY, left: event.clientX}).show();//position tooltip location
        $(".toolTip h3").html(json.nodes[i].title);//add title from json file
        $(".toolTip p").html(json.nodes[i].paraTxt);//add paragraph text from json file
        $(".toolTip img").attr("src", json.nodes[i].image);//add image from json file
        $(".toolTip a").attr("href", json.nodes[i].popupImg[i + 1]);
        });
    }(i);
}

是的，这很难看。但它确实有效。

以更好的方式重新配置我的脚本

1 个答案: