0

我试图在我的 document.ready 事件中创建一个循环，以便我可以有干代码。但是，当我通过循环创建它时，单击事件返回未定义，但是当我单独声明每个 document.ready 事件时，它工作正常。

<script>
var $a = jQuery.noConflict();
$a(document).ready(function () {
    $a(".nav-1-1").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-1").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-2").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-2").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-3").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-3").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-4").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-4").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-5").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-5").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-6").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-6").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-7").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-7").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-8").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-8").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-9").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-9").find("a").attr("href");
    });
});

$a(document).ready(function () {
    $a(".nav-1-10").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-10").find("a").attr("href");
    });
});
</script>

这是我试图简化上述代码的循环：

<script>
var $a = jQuery.noConflict();

$a(document).ready(function () {
    for (var i=1; i<11; i++) {
        $a(".nav-1-1"+i).css('cursor','pointer').click(function(event) {
            window.location.href = $a(".nav-1-1").find("a").attr("href");
        });
    }
});
</script>

正如 Trevor 指出的那样，我已经更正了上述循环，因为我忘记了包含 i 变量。

4

2 回答 2

5

稍微简化你的逻辑：

jQuery(function($) {
    $("[class*='nav-1-']").css('cursor', 'pointer').click(function() {
        location = $(this).find("a").prop("href");
    });
});

演示

不过，您应该考虑为所有nav-1-XX元素添加一个公共类，以便以更简单、更有效的方式选择它们。如果你这样做，你也可以cursor:pointer在那个类上应用。

解释

jQuery(fn)是 的简写jQuery(document).ready(fn)。这只是一个偏好问题。这些接收表单的回调中的任何一个都jQuery作为第一个参数接收，因此我将其别名化回$DOM 就绪回调内部。这可以以noConflict相同的方式在模式下使用。

属性包含选择器[name*="value"]nav-1-将选择在其类属性中包含 a 的所有元素。如果您遵循我的建议并为所有元素添加一个公共类，您将不需要它。

在作为事件处理程序调用的函数内部，this引用将指向已接收到它正在侦听的事件的元素。也就是说，this将引用nav-1-XX已单击的给定。

最后，window（全局范围）不需要显式引用。无论哪种方式，词法范围都会找到它：

window.location === location

（也就是说，除非你已经遮蔽了全局位置对象）

因此，使用其中一个window.location和location主要是一个偏好问题。

分配给其中一个location或location.href也是一个偏好问题，因为两者都得到广泛支持。

于 2013-11-05T23:21:06.863 回答
1

如果你混合 php 和 Js 怎么办？！使用 php 生成上面的长代码 .. 并且在您的 index.php 中它看起来仍然是相同的小代码：

例子：

$a(document).ready(function () {

<?php
$i=0;
 while ( $i < 11)
{
$i++;
?>

    $a(".nav-1-<?php echo $i;?>").css('cursor','pointer').click(function(event) {
        window.location.href = $a(".nav-1-<?php echo $i;?>").find("a").attr("href");
    });

<?php
 }
?>

});
于 2013-11-05T23:25:15.733 回答