英文:
How can I write function with different parameters in javascript?
问题
我有这样一种情况,我想要添加两个不同的参数,因为我想在不同的位置显示图像标签弹出窗口?
此函数用于在左侧显示弹出窗口
function openBubble() {
var content = myData[this.id];
bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
+ '<img src="' + content.image + '" alt="" />'
+ '<p>' + content.description + '</p>';
bubble.style.top = (event.clientY - 20) + "px";
bubble.style.left = (event.clientX - 200) + "px";
bubble.className = 'shown';
}
此函数用于在右侧显示弹出窗口
function openBubble() {
var content = myData[this.id];
bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
+ '<img src="' + content.image + '" alt="" />'
+ '<p>' + content.description + '</p>';
bubble.style.top = (event.clientY + 20) + "px";
bubble.style.left = (event.clientX + 200) + "px";
bubble.className = 'shown';
}
这是我的HTML -
<map name="myMap" id="myMap">
<area id="left-eye" coords="118,36,148,80" shape="rect" href="javascript:void(0);">
<area id="mouth" coords="121,84,198,118" shape="rect" href="javascript:void(0);">
</map>
我想将area
标签的id为"left-eye"与左侧的函数关联起来。
我想将area
标签的id为"mouth"与右侧的函数关联起来。
这是我的代码的jsfiddle链接 - https://jsfiddle.net/1u6n5rvw/
我该如何做到这一点?谢谢。
英文:
I have a situation where I want to add two different parameters as I want to display image tag popups in different positions?
This function is to display popup on left side
function openBubble() {
var content = myData[this.id];
bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
+ '<img src="' + content.image + '" alt="" />'
+ '<p>' + content.description + '</p>';
bubble.style.top = (event.clientY - 20) + "px";
bubble.style.left = (event.clientX - 200) + "px";
bubble.className = 'shown';
}
This function is to display popup on right side
function openBubble() {
var content = myData[this.id];
bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
+ '<img src="' + content.image + '" alt="" />'
+ '<p>' + content.description + '</p>';
bubble.style.top = (event.clientY + 20) + "px";
bubble.style.left = (event.clientX + 200) + "px";
bubble
.className = 'shown';
}
Here is my HTML -
<map name="myMap" id="myMap">
<area id="left-eye" coords="118,36,148,80" shape="rect" href="javascript:void(0);">
<area id="mouth" coords="121,84,198,118" shape="rect" href="javascript:void(0);">
</map>
I want to associate area id="left-eye" with function on the left side.
I want to associate area id="mouth" with function on the right side.
Here is the jsfiddle to my code - https://jsfiddle.net/1u6n5rvw/
How can I do this? Thanks.
答案1
得分: 1
你的情况有点特殊,因为你已经根据你点击的元素的id来检索数据。
由于你正在学习JavaScript,我将解释一下,以防你不确定:当你像这样添加一个事件监听器时areas[i].addEventListener('click', openBubble, false);
(直接传递函数引用),JavaScript会将this
绑定到你点击的HTML元素,这允许你在函数内部使用this.id
。
现在,我认为对你来说更灵活的方法是使用这些数据,这样你可以直接在数据中配置窗口位置。这样,你可以继续使用函数引用作为事件处理程序,而无需添加更多的代码来传递参数给函数(这是可能的,但更复杂)。
以下是第一个版本,如果你只想区分“left”和“right”,可以通过向数据添加一个字符串属性position
并根据固定值进行测试来实现
$(function() {
$('.map').maphilight();
});
var myData = {
"left-eye": {
"title": "",
"image": "",
"description": "Lorem ipsum A dolor sin amet. .",
"position": "left"
},
"mouth": {
"title": "",
"description": "Lorem ipsum B dolor sin amet. Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.</p>Lorem ipsum B dolor sin amet.",
"position": "right"
},
};
var areas = document.getElementsByTagName('area'),
bubble = document.getElementById('myBubble'),
bubbleContent = document.getElementById('myBubbleContent'),
bubbleClose = document.getElementById('myBubbleCloseButton');
// On click of an area, open popup
for (var i = 0, l = areas.length; i < l; i++) {
areas[i].addEventListener('click', openBubble, false);
}
// On click of close button, close popup
bubbleClose.addEventListener('click', closeBubble, false);
function openBubble() {
var content = myData[this.id];
bubbleContent.innerHTML = '<h3>' + content.title + '</h3>' +
'<img src="' + content.image + '" alt="" />' +
'<p>' + content.description + '</p>';
if (content.position === 'left') {
bubble.style.top = (event.clientY - 20) + "px";
bubble.style.left = (event.clientX - 200) + "px";
} else if (content.position === 'right') {
bubble.style.top = (event.clientY + 20) + "px";
bubble.style.left = (event.clientX + 200) + "px";
}
bubble.className = 'shown';
}
function closeBubble() {
bubble.className = '';
}
// Make the image map responsive
imageMapResize();
$.fn.maphilight.defaults = {
fill: true,
fillColor: '1A8782',
fillOpacity: 1,
stroke: true,
strokeColor: '#1A8782',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}
以下是更灵活版本,您可以通过向数据添加数字属性yOffset
和xOffset
并直接使用它们来设置窗口坐标来设置x和y偏移量
$(function() {
$('.map').maphilight();
});
var myData = {
"left-eye": {
"title": "",
"image": "",
"description": "Lorem ipsum A dolor sin amet. .",
"yOffset": -20,
"xOffset": -200
},
"mouth": {
"title": "",
"description": "Lorem ipsum B dolor sin amet. Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.</p>Lorem ipsum B dolor sin amet.",
"yOffset": 20,
"xOffset": 200
},
};
var areas = document.getElementsByTagName('area'),
bubble = document.getElementById('myBubble'),
bubbleContent = document.getElementById('myBubbleContent'),
bubbleClose = document.getElementById('myBubbleCloseButton');
// On click of an area, open popup
for (var i = 0, l = areas.length; i < l; i++) {
areas[i].addEventListener('click', openBubble, false);
}
// On click of close button, close popup
bubbleClose.addEventListener('click', closeBubble, false);
function openBubble() {
var content = myData[this.id];
bubbleContent.innerHTML = '<h3>' + content.title + '</h3>' +
'<img src="' + content.image + '" alt="" />' +
'<p>' + content.description + '</p>';
bubble.style.top = (event.clientY + content.yOffset) + "px";
bubble.style.left = (event.clientX + content.xOffset) + "px";
bubble.className = 'shown';
}
function closeBubble() {
bubble.className = '';
}
// Make the image map responsive
imageMapResize();
$.fn.maphilight.defaults = {
fill: true,
fillColor: '1A8782',
fillOpacity: 1,
stroke: true,
strokeColor: '#1A8782',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}
英文:
Your case is a bit special, as you are already retreiving data based on the id of the element you cliked.
As you are learning JavaScript, I will explain in case you are not sure: when you add an event listener like this areas[i].addEventListener('click', openBubble, false);
(passing directly the function reference), JavaScript binds for you this
to the HTML element you clicked, that allows you to use this.id
inside the function.
Now, the more flexible to you IMO will be to use this data so you can configure directly the window position inside the data. This way, you can keep using the function reference as the event handler without having to add more code to pass parameters to the function (it's possible, but more complicated)
Here is a first version if you only want to distinguish between "left" and "right", by adding a string property position
to your data and testing against fixed values
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
$(function() {
$('.map').maphilight();
});
var myData = {
"left-eye": {
"title": "",
"image":"",
"description": "Lorem ipsum A dolor sin amet. .",
"position": "left"
},
"mouth": {
"title": "",
"description": "Lorem ipsum B dolor sin amet. Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.</p>Lorem ipsum B dolor sin amet.",
"position": "right"
},
};
var areas = document.getElementsByTagName('area'),
bubble = document.getElementById('myBubble'),
bubbleContent = document.getElementById('myBubbleContent'),
bubbleClose = document.getElementById('myBubbleCloseButton');
// On click of an area, open popup
for(var i=0, l=areas.length; i<l; i++) {
areas[i].addEventListener('click', openBubble, false);
}
// On click of close button, close popup
bubbleClose.addEventListener('click', closeBubble, false);
function openBubble() {
var content = myData[this.id];
bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
+ '<img src="' + content.image + '" alt="" />'
+ '<p>' + content.description + '</p>';
if(content.position === 'left'){
bubble.style.top = (event.clientY - 20) + "px";
bubble.style.left = (event.clientX - 200) + "px";
}else if(content.position === 'right'){
bubble.style.top = (event.clientY + 20) + "px";
bubble.style.left = (event.clientX + 200) + "px";
}
bubble.className = 'shown';
}
function closeBubble() {
bubble.className = '';
}
// Make the image map responsive
imageMapResize();
$.fn.maphilight.defaults = {
fill: true,
fillColor: '1A8782',
fillOpacity: 1,
stroke: true,
strokeColor: '#1A8782',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}
<!-- language: lang-css -->
#myWrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; }
#myImage{ display: block; }
#myBubble{ background: #fff; border: 1px solid #aaa; padding: .5rem 1rem; display: none; top: 1.5rem; left: 1.5rem; width: 40%; }
#myBubble.shown{position: fixed; display: block;cursor: pointer;font-size: 0.8rem;
margin-top: 0.2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); width:20%; }
#myBubble.shown:before{
content: "";
position: absolute;
top: 20px;
left:-30px;
z-index: 1;
border: solid 15px transparent;
border-right-color: #FFF;
}
#myBubble img{ display: block; width: 100%;
}
#myBubbleCloseButton{ position: absolute; top: 0; right: 0; padding: .5rem; line-height: 1; cursor: pointer; color: #1A8782; }
#myBubbleCloseButton:hover{ color: #1A8782; }
<!-- language: lang-html -->
<script src="https://cdn.rawgit.com/davidjbradshaw/image-map-resizer/master/js/imageMapResizer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>
<div id="myWrapper">
<img id="myImage" src="http://tinypic.com/images/goodbye.jpg" usemap="#myMap" alt="" class="map" />
<map name="myMap" id="myMap">
<area id="left-eye" coords="118,36,148,80" shape="rect" href="javascript:void(0);">
<area id="mouth" coords="121,84,198,118" shape="rect">
</map>
<div id="myBubble">
<div id="myBubbleContent"></div>
<div id="myBubbleCloseButton">✕</div>
</div>
</div>
<!-- end snippet -->
Here is a more flexible version where you can directly set the x and y offsets by adding numeric properties yOffset
and xOffset
to your data and using them directly to set the window coordinates
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
$(function() {
$('.map').maphilight();
});
var myData = {
"left-eye": {
"title": "",
"image":"",
"description": "Lorem ipsum A dolor sin amet. .",
"yOffset": -20,
"xOffset": -200
},
"mouth": {
"title": "",
"description": "Lorem ipsum B dolor sin amet. Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.</p>Lorem ipsum B dolor sin amet.",
"yOffset": +20,
"xOffset": +200
},
};
var areas = document.getElementsByTagName('area'),
bubble = document.getElementById('myBubble'),
bubbleContent = document.getElementById('myBubbleContent'),
bubbleClose = document.getElementById('myBubbleCloseButton');
// On click of an area, open popup
for(var i=0, l=areas.length; i<l; i++) {
areas[i].addEventListener('click', openBubble, false);
}
// On click of close button, close popup
bubbleClose.addEventListener('click', closeBubble, false);
function openBubble() {
var content = myData[this.id];
bubbleContent.innerHTML = '<h3>' + content.title + '</h3>'
+ '<img src="' + content.image + '" alt="" />'
+ '<p>' + content.description + '</p>';
bubble.style.top = (event.clientY + content.yOffset) + "px";
bubble.style.left = (event.clientX + content.xOffset) + "px";
bubble.className = 'shown';
}
function closeBubble() {
bubble.className = '';
}
// Make the image map responsive
imageMapResize();
$.fn.maphilight.defaults = {
fill: true,
fillColor: '1A8782',
fillOpacity: 1,
stroke: true,
strokeColor: '#1A8782',
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
}
<!-- language: lang-css -->
#myWrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; }
#myImage{ display: block; }
#myBubble{ background: #fff; border: 1px solid #aaa; padding: .5rem 1rem; display: none; top: 1.5rem; left: 1.5rem; width: 40%; }
#myBubble.shown{position: fixed; display: block;cursor: pointer;font-size: 0.8rem;
margin-top: 0.2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); width:20%; }
#myBubble.shown:before{
content: "";
position: absolute;
top: 20px;
left:-30px;
z-index: 1;
border: solid 15px transparent;
border-right-color: #FFF;
}
#myBubble img{ display: block; width: 100%;
}
#myBubbleCloseButton{ position: absolute; top: 0; right: 0; padding: .5rem; line-height: 1; cursor: pointer; color: #1A8782; }
#myBubbleCloseButton:hover{ color: #1A8782; }
<!-- language: lang-html -->
<script src="https://cdn.rawgit.com/davidjbradshaw/image-map-resizer/master/js/imageMapResizer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js"></script>
<div id="myWrapper">
<img id="myImage" src="http://tinypic.com/images/goodbye.jpg" usemap="#myMap" alt="" class="map" />
<map name="myMap" id="myMap">
<area id="left-eye" coords="118,36,148,80" shape="rect" href="javascript:void(0);">
<area id="mouth" coords="121,84,198,118" shape="rect">
</map>
<div id="myBubble">
<div id="myBubbleContent"></div>
<div id="myBubbleCloseButton">✕</div>
</div>
</div>
<!-- end snippet -->
答案2
得分: 0
将对象的位置属性...
var myData = {
"left-eye": {
"title": "ggfhfhgh",
"image": "",
"description": "Lorem ipsum A dolor sin amet. .",
"left": -200,
"top": -20
},
"mouth": {
"title": "",
"description": "...",
"left": 200,
"top": 20
}
};
......
bubble.style.top = (event.clientY + this.top) + "px";
bubble.style.left = (event.clientX + this.left) + "px";
使用一个switch
语句会更快速但这样更具扩展性。
英文:
make the positions properties of the objects ...
var myData = {
"left-eye": {
"title": "ggfhfhgh",
"image":"",
"description": "Lorem ipsum A dolor sin amet. .",
"left": -200,
"top": -20
},
"mouth": {
"title": "",
"description": "...",
"left": 200,
"top": 20
}
};
......
bubble.style.top = (event.clientY + this.top) + "px";
bubble.style.left = (event.clientX + this.left) + "px";
Using a switch would be quick and dirty but this is more scaleable.
答案3
得分: 0
由于您已经拥有myData对象,您可以将top和left的值存储在其中。您可以使用负数存储负值,而不使用负号存储正值。然后,进行数学计算时,只需对这些值进行加法运算。
var myData = {
"left-eye": {
"top" : -20,
"left" : -200,
"title": "",
"image":"",
"description": "Lorem ipsum A dolor sin amet. ."
},
"mouth": {
"top" : 20,
"left" : 200,
"title": "",
"description": "Lorem ipsum B dolor sin amet. Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.</p>Lorem ipsum B dolor sin amet."
},
};
const areas = document.querySelectorAll('area')
areas.forEach((a) => a.addEventListener("click", openBubble, false))
function openBubble(){
const data = myData[this.id];
const top = (event.clientY + data.top) + "px";
const left = (event.clientX + data.left) + "px";
console.log(event.clientY, data.top, top)
console.log(event.clientX, data.left, left)
}
<img id="myImage" src="http://tinypic.com/images/goodbye.jpg" usemap="#myMap" alt="" class="map" />
<map name="myMap" id="myMap">
<area id="left-eye" coords="118,36,148,80" shape="rect" href="javascript:void(0);"></area>
<area id="mouth" coords="121,84,198,118" shape="rect" href="javascript:void(0);"></area>
</map>
请注意,我已经将HTML和JavaScript代码翻译成中文,并将代码标记(```
)包围起来,以便您可以轻松识别和复制。
英文:
Since you already have the object myData, you can store the top and left values in there. You can store the negatives with a minus and the positive without it. Then for the math just + those values.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var myData = {
"left-eye": {
"top" : -20,
"left" : -200,
"title": "",
"image":"",
"description": "Lorem ipsum A dolor sin amet. ."
},
"mouth": {
"top" : 20,
"left" : 200,
"title": "",
"description": "Lorem ipsum B dolor sin amet. Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.vLorem ipsum B dolor sin amet.Lorem ipsum B dolor sin amet.</p>Lorem ipsum B dolor sin amet."
},
};
const areas = document.querySelectorAll('area')
areas.forEach((a) => a.addEventListener("click",openBubble,false))
function openBubble(){
const data = myData[this.id];
const top = (event.clientY + data.top) + "px";
const left = (event.clientX + data.left) + "px";
console.log(event.clientY, data.top,top)
console.log(event.clientX, data.left,left)
}
<!-- language: lang-html -->
<img id="myImage" src="http://tinypic.com/images/goodbye.jpg" usemap="#myMap" alt="" class="map" />
<map name="myMap" id="myMap">
<area id="left-eye" coords="118,36,148,80" shape="rect" href="javascript:void(0);">
<area id="mouth" coords="121,84,198,118" shape="rect" href="javascript:void(0);">
</map>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论