Question

我正在尝试在我的document.ready事件中创建一个循环，以便我可以使用干代码。但是当我通过循环创建它时，click事件返回undefined但是当我单独声明每个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变量。

Answer 1

稍微简化你的逻辑：

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

Demo

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

说明

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

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

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

最后，不需要显式引用window（全局范围）。 Lexical scope会找到它：

window.location === location

（即除非你shadowed全球位置对象）

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

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

Answer 2

如果你混合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
 }
?>

});

Jquery Document.ready循环

2 个答案:

说明