浏览器正在自动分配函数参数的值
Browser is assigning automatically value of a parameter of a function
我在 javascript 上遇到了一个奇怪的错误,我尝试了不同的方法来解决它,但在这种情况下,它打败了我。这段代码的想法是当用户按下元素标签 h5 '<h5 class="m" id="myelem">Galery of photos</h5>
' 时显示可用的照片库,然后网站显示带有 SweetAlert2 和 Bootstrap.
的图库
因此,当我单击 h5 元素时,它会运行名为 sweetCarousel 的函数,该函数会显示照片库。此时我以这种方式调用函数 sweetCarousel.bind(this, ...) 来接收参数,在这种情况下,是来自照片的 URL 。
我在 Sweetalert 中注入 HTML 代码。作为条件,警报中的 HTML 会根据我要显示的照片数量而变化。有趣的是,当我只加载一张照片时:
document.getElementById("myelem").addEventListener("click", sweetCarousel.bind(this, "./img/image1.jpg"));
浏览器是这样设置参数值的:
img1 = "./img/image1.jpg", img2 = MouseEvent {isTrusted: true, screenX: 449, screenY: 442, clientX: 449, clientY: 339, …}, img3 = ""
所以第一个条件 if (img2.length == 0) {
跳过它并转到第二个条件 if (img3.length == 0) {
。
我不知道为什么会发生这个错误。我计划在第一个条件中评估代码,因为我只传递了一个图像作为参数
function sweetCarousel(img1, img2 = "", img3 = "") {
if (img2.length == 0) {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> </div> <!-- Controls --> </div></div>';
} else if (img3.length == 0) {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
} else {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <div class="item"> <img src="' + img3 +'"> </div> </div> <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
}
Swal.fire( {
html: eee,
width: '50%',
background: "black !important",
showCloseButton: true,
showCancelButton: false,
showConfirmButton: false,
focusConfirm: false
});
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll:"vertical"
});
}
这是预期的行为。当您为 addEventListener()
方法提供事件侦听器时,侦听器必须实现 EventListener
接口。
所以如果你想给监听器提供额外的参数,我建议你使用闭包。
document.getElementById("trigger1").addEventListener("click", eventListener( ["./img/image1.jpg"]).bind(this));
document.getElementById("trigger2").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg"]).bind(this));
document.getElementById("trigger3").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg","./img/image3.jpg"]).bind(this));
function eventListener(images){
return function(event){
console.log('images', images);
console.log('event', event);
}
}
<button id="trigger1">Trigger 1</button>
<button id="trigger2">Trigger 2</button>
<button id="trigger3">Trigger 3</button>
我还建议您将图像作为数组传递,而不是将它们作为单独的参数传递。通过使用数组,您可以用循环替换 if/else
块以创建更通用的函数。想象一下,您将来要提供 50 张图像,那么您将不得不创建 50 if/else 个块。您可以按以下方式进行:
document.getElementById("trigger").addEventListener("click", eventListener(["./img/image1.jpg", "./img/image2.jpg", "./img/image3.jpg"]).bind(this));
function eventListener(images) {
return function(event) {
const indicators = images.map(function(image, index) {
return `
<li
data-target="#carousel-example-generic"
data-slide-to="${index}"
${index === 0 ? `class="active"` : ``}
></li>
`
})
const imageItems = images.map(function(image, index) {
return `
<div class="item ${index === 0 ? `active` : ``}">
<img src="${image}">
</div>
`
})
const carousel = `
<div class="">
<div class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
${indicators}
</ol>
<div class="carousel-inner" role="listbox">
${imageItems}
</div>
<!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
`
console.log(carousel)
}
}
<button id="trigger">Trigger</button>
我在 javascript 上遇到了一个奇怪的错误,我尝试了不同的方法来解决它,但在这种情况下,它打败了我。这段代码的想法是当用户按下元素标签 h5 '<h5 class="m" id="myelem">Galery of photos</h5>
' 时显示可用的照片库,然后网站显示带有 SweetAlert2 和 Bootstrap.
因此,当我单击 h5 元素时,它会运行名为 sweetCarousel 的函数,该函数会显示照片库。此时我以这种方式调用函数 sweetCarousel.bind(this, ...) 来接收参数,在这种情况下,是来自照片的 URL 。 我在 Sweetalert 中注入 HTML 代码。作为条件,警报中的 HTML 会根据我要显示的照片数量而变化。有趣的是,当我只加载一张照片时:
document.getElementById("myelem").addEventListener("click", sweetCarousel.bind(this, "./img/image1.jpg"));
浏览器是这样设置参数值的: img1 = "./img/image1.jpg", img2 = MouseEvent {isTrusted: true, screenX: 449, screenY: 442, clientX: 449, clientY: 339, …}, img3 = ""
所以第一个条件 if (img2.length == 0) {
跳过它并转到第二个条件 if (img3.length == 0) {
。
我不知道为什么会发生这个错误。我计划在第一个条件中评估代码,因为我只传递了一个图像作为参数
function sweetCarousel(img1, img2 = "", img3 = "") {
if (img2.length == 0) {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> </div> <!-- Controls --> </div></div>';
} else if (img3.length == 0) {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
} else {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <div class="item"> <img src="' + img3 +'"> </div> </div> <!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
}
Swal.fire( {
html: eee,
width: '50%',
background: "black !important",
showCloseButton: true,
showCancelButton: false,
showConfirmButton: false,
focusConfirm: false
});
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll:"vertical"
});
}
这是预期的行为。当您为 addEventListener()
方法提供事件侦听器时,侦听器必须实现 EventListener
接口。
所以如果你想给监听器提供额外的参数,我建议你使用闭包。
document.getElementById("trigger1").addEventListener("click", eventListener( ["./img/image1.jpg"]).bind(this));
document.getElementById("trigger2").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg"]).bind(this));
document.getElementById("trigger3").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg","./img/image3.jpg"]).bind(this));
function eventListener(images){
return function(event){
console.log('images', images);
console.log('event', event);
}
}
<button id="trigger1">Trigger 1</button>
<button id="trigger2">Trigger 2</button>
<button id="trigger3">Trigger 3</button>
我还建议您将图像作为数组传递,而不是将它们作为单独的参数传递。通过使用数组,您可以用循环替换 if/else
块以创建更通用的函数。想象一下,您将来要提供 50 张图像,那么您将不得不创建 50 if/else 个块。您可以按以下方式进行:
document.getElementById("trigger").addEventListener("click", eventListener(["./img/image1.jpg", "./img/image2.jpg", "./img/image3.jpg"]).bind(this));
function eventListener(images) {
return function(event) {
const indicators = images.map(function(image, index) {
return `
<li
data-target="#carousel-example-generic"
data-slide-to="${index}"
${index === 0 ? `class="active"` : ``}
></li>
`
})
const imageItems = images.map(function(image, index) {
return `
<div class="item ${index === 0 ? `active` : ``}">
<img src="${image}">
</div>
`
})
const carousel = `
<div class="">
<div class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
${indicators}
</ol>
<div class="carousel-inner" role="listbox">
${imageItems}
</div>
<!-- Controls --> <a class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
`
console.log(carousel)
}
}
<button id="trigger">Trigger</button>