gpt4 book ai didi

javascript - jQuery div 可点击并跟随子 URL

转载 作者:行者123 更新时间:2023-11-28 12:40:35 25 4
gpt4 key购买 nike

有人可以向我解释一下为什么这不起作用吗?

抱歉,我完全是 javascript + jQuery 的初学者。

代码如下:

Javascript/jQuery:

<script type="text/javascript"> 
$('.clickk').click(function(e){
window.location.href = $(this).find('a').attr('href');
});
</script>

HTML:

 <div  class="clickk" >
<a href="google.com">link</a>
blah blah blah.
</div>

请帮我找到我丢失的东西。

提前致谢。希望问题很清楚。

最佳答案

两个可能的问题:

  1. 您可能会在 DOM 中存在具有该类的任何元素之前执行该脚本(更多内容见下文)。

  2. href 应以 http:// 开头,例如 href="http://www.google.com"href="http://google.com"。仅 href="google.com" 使其成为相对链接,但无法可靠地工作。

假设您修复了 #2,以下是有关 #1 的一些详细信息:

不起作用:

<!-- ... -->
<head>
<!-- ... -->
<script type="text/javascript">
$('.clickk').click(function(e){
window.location.href = $(this).find('a').attr('href');
});
</script>
</head>
<body>
<!-- ... -->
<div class="clickk" >
<a href="http://google.com">link</a>
blah blah blah.
</div>

有两种方法可以解决此问题:

将脚本放在页面末尾

这通常是首选方式,将脚本放在页面的末尾,而不是开头。

作品:

<body>
<!-- ... -->
<div class="clickk" >
<a href="http://google.com">link</a>
blah blah blah.
</div>
<!-- ... -->
<script src="jquery.js"></script>
<script type="text/javascript">
$('.clickk').click(function(e){
window.location.href = $(this).find('a').attr('href');
});
</script>
</body>

这还可以减少明显的页面加载时间,因为在等待脚本下载时不会阻止渲染。请参阅YUI's guidelines (或其他几个中的任何一个)。脚本上方定义的 DOM 元素可供该脚本访问。脚本下面定义的 DOM 元素不是(除非您执行如下操作来延迟操作)。

使用ready事件

如果由于某种原因不适合将脚本放在最后,您可以使用 ready事件:

作品:

<!-- ... -->
<head>
<!-- ... -->
<script type="text/javascript">
jQuery(function($) {
$('.clickk').click(function(e){
window.location.href = $(this).find('a').attr('href');
});
});
</script>
</head>
<body>
<!-- ... -->
<div class="clickk" >
<a href="http://google.com">link</a>
blah blah blah.
</div>

请注意,将函数传递到 jQuery(或 $,这只是 jQuery 的别名,除非您使用 noConflict ) 与将 1 传递给 $(document).ready(...) 相同;详情:http://api.jquery.com/jQuery/#jQuery3

关于javascript - jQuery div 可点击并跟随子 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12660361/

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