gpt4 book ai didi

javascript - 如何写一个简单的函数?

转载 作者:可可西里 更新时间:2023-11-01 01:56:55 25 4
gpt4 key购买 nike

如何在 jQuery 中创建一个函数、调用它并将变量传递给它?这是 Javascript 样式:

<script type="text/javascript">
function popup(msg) {
alert(msg);
}
</script>

然后您只需将事件包含在 HTML 中:

<html>
<input type="submit" onclick="popup('My Message')" />
</html>

什么是 jQuery 等同于这样做的?从所有“新手”教程来看,都是不接受变量的静态函数。例如:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function() {
alert('hello, world');
});
});
</script>

我希望能够动态地包含不同的消息。上面的代码会影响所有按钮并输出相同的消息“你好,世界”。

最佳答案

如果您希望消息是动态的,您将要使用 data-attributes :

<input class='message-button-' type="submit" data-message="My Message" />

然后在一个单独的 javascript 文件中:

// equivalent of $(document).ready(function(){...
$(function(){

// Functionality starts here
$('.message-button').on('click', function(e){
alert($(this).data('message'));
})


});

现在该函数将在任何时候执行类为 .message-button 的按钮被点击,它会使用自定义属性data-message显示一条消息。

希望对您有所帮助! :)

更新:

请注意,不引人注目地执行 javascript 被认为是最佳实践。有人提到仍在使用 onclick就像你在你的例子中所做的那样,不要那样做。像我在这里使用 jquery 的 .on('click', function(){}) 显示的那样绑定(bind)事件方法。

如果你的点击项是 anchor 标签<a>然后你可以根据需要阻止 href 被跟踪,方法是使用 e.preventDefault :

$('a').on('click', function(e){
e.preventDefault()
})

另外,如果您需要知道,$('.message-button')正在使用 css 选择器来抓取 dom 元素。任何有效的 CSS 选择器通常都可以在那里工作。

一步一步

首先,我们需要将所有代码包装在 jQuery 提供的函数中,该函数等待文档准备好处理 javascript 操作和 dom 操作。长版是$(document).ready(function(){ /* CODE GOES HERE */ })但我使用的版本是一个快捷方式 $(function({ /* CODE GOES HERE */ }) :

$(function(){
})

接下来,我们需要将一个事件绑定(bind)到我们的按钮。因为我们已经给它上课了 .message-button ,我们可以使用 jQuery 获取该元素并将“点击”事件绑定(bind)到它:

$(function(){
// Functionality starts here
$('.message-button').on('click', function(e){
// Code here executes when the input button is clicked
})


});

事件处理程序内部 this重新绑定(bind)以直接指向触发事件的 HTML 元素。包装在 $() 中使我们能够访问 jquery 方法。因此: $(this) 使用非常频繁。 jQuery 给了我们 .data()访问任何data-*的方法元素上的方法并为我们提供值,这就是 alert() 的内容正在做。

$(function(){
// Functionality starts here
$('.message-button').on('click', function(e){
alert($(this).data('message'));
})


});

关于javascript - 如何写一个简单的函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11042377/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com