jQuery Document.ready循環

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");
    });
});

演示版

但是，您應該考慮將通用類添加到所有nav-1-XX元素中，以更簡單，更有效的方式選擇它們。 如果這樣做，還可以將cursor:pointer應用於該類。

---

說明

jQuery(fn)是jQuery(document).ready(fn)的簡寫。 這只是一個偏好問題。 這些接收表單的回調中的任何一個都將jQuery作為第一個參數，因此我將其別名化為DOM ready回調中的$ 。 可以以相同方式在noConflict模式下使用。

屬性包含選擇器[name*="value"]將選擇所有在其class屬性中包含nav-1-元素。 如果您遵循我的建議並將通用類添加到所有元素，則不需要它。

在稱為事件處理程序的函數內部， this引用將指向已接收其正在偵聽的事件的元素。 也就是說， this將引用已單擊的給定nav-1-XX 。

最后，不需要顯式引用window （全局范圍）。 詞匯范圍可以通過以下兩種方式找到它：

window.location === location

（也就是說，除非您已遮蓋了全局位置對象）

因此，使用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
 }
?>

});