javascript - 将变量传递给 jQuery 函数

标签 javascript jquery

我知道这可能很简单,但我已经阅读并尝试了这里的很多答案,但我无法弄清楚。如何将变量“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/

相关文章:

javascript - AngularJS 自定义验证 - 在 Controller 中将表单项设置为无效

javascript - Nextjs API 文件夹调用 - 生产中出现 500 错误

javascript - 增加类型编号后动态添加下拉菜单

javascript - 为什么第 nth-of-type 检测仅在 Firefox 中失败?

jquery - 网络摄像头/麦克风检测

javascript - 如何在 Javascript 中使用 .split 最好地解析文本文件

javascript - 仅从 html 页面中提取单词

javascript - 如何在 EXT-GWT 中拆分面板?

javascript - jquery/javascript - 如何循环遍历数组并在每次迭代中创建变量?

jQuery:从字符串数组创建多个跨度