我知道这可能很简单,但我已经阅读并尝试了这里的很多答案,但我无法弄清楚。如何将变量“booklink”传递给 jQuery 函数?
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btns = document.querySelectorAll('.ebtn');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
[].forEach.call(btns, function(btn) {
btn.onclick = function(event) {
modal.style.display = "block";
var booklink = jQuery(this).attr("data-id");
console.log(booklink);
// on submit open book link
jQuery('#mc4wp-form-1').submit(function () {
window.open(booklink);
})
}
})
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
最佳答案
据我所知,您正在使用 jQuery 和 vanilla javascript 的混合,这不是一件坏事,但它会使将来的事情变得困惑,尝试坚持一种风格(即 jQuery 或 vanilla javascript 而不是两者) .
从您的代码中可以看出,您的代码应该按原样工作,因为您在调用提交之前声明了“booklink”变量。
我已经整理了您的代码以匹配所有 jQuery 并对其进行了轻微修改,这应该有助于传递“booklink”值。
// Get the modal
var modal = jQuery("#myModal");//return matching elemetns id(s) of #myModal
// Get the button that opens the modal
var btns = jQuery('.ebtn');//return matching elements with class(es) of .ebtn
//Declare booklink out of the event
var booklink = "";
$('.ebtn').on('click', function(event){
modal.css('display','block');
//Update booklink when processing the click event
booklink = jQuery(this).attr("data-id");
//Call the function to submit the form and open a new window
openBookLink(booklink);
});
// When the user clicks on <span> (x), close the modal
$('.close').on('click', function(){
modal.css('display','none');
})
// When the user clicks anywhere outside of the modal, close it
$(window).on('click', function(event) {
if (event.target == modal) {
modal.css('display','none');
}
});
function openBookLink(booklink){
jQuery('#mc4wp-form-1').submit(function () {
//This should match what booklink was set to above
window.open(booklink);
})
}
主要更改是在事件外部声明 booklink 变量,并在处理点击事件时定义它的值,然后将其传递给函数。
关于javascript - 将变量传递给 jQuery 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51412502/