使用jquery'this'來濃縮代碼

我儘量不提問，但我無法弄清楚什麼應該很容易。我正在爲練習briannabaldwinphotography.com建立一個網站。我只是試圖壓縮這個，這樣我就可以點擊一個錨點，它會順利滾動到一個<section>，其ID與錨點名稱相同。例如：'about'li anchor的href爲#section_three，將滾動到<section>，其ID爲section_three。我嘗試了10個不同的變體，它不適合我。我正在尋找的排序是$(this).attr("href").offest().top} ....等。這是我想要濃縮的代碼。謝謝。使用jquery'this'來濃縮代碼

$(function() { 
    $("[href='#section_three']").on("click", function() { 
     $("html body").animate({"scrollTop":$("#section_three").offset().top}, 1000); 
     return false; 

    }); 
    $("[href='#section_two']").on("click", function() { 
     $("html body").animate({"scrollTop":$("#section_two").offset().top}, 1000); 
     return false; 


    }); 
    $("[href='#section_four']").on("click", function() { 
     $("html body").animate({"scrollTop":$("#section_four").offset().top}, 1000); 
     return false; 


    }); 
    $("[href='#section_one']").on("click", function() { 
     $("html body").animate({"scrollTop":$("#section_one").offset().top}, 1000); 
     return false; 


    }); 

});

來源

2015-09-20 Chris

「我儘量不要問問題」 - 爲什麼要問...... :)順便說一句，$（this）.attr（'href'）應該有助於...和'a'選擇器，我猜（沒有看到你的HTML ）... – sinisake

如果使用attribute starts with selector (^=)你可以得到一個href開始的所有元素與"#section_"，綁定一個處理程序的，那麼處理程序中使用this.href獲得被點擊的特定元素的href：

$(function() { 
    $("[href^='#section_']").on("click", function() { 
     $("html body").animate({"scrollTop" : $(this.href).offset().top}, 1000); 
     return false; 
    }); 
});

注意this.href做相同的工作爲$(this).attr("href")，但更有效的：沒有必要創建一個jQuery對象訪問，你可以得到直接的元素的屬性。

來源

2015-09-20 00:21:49 nnnnnn

實際上'this.href'返回協議，域等完整的絕對URL ...'this.hash'雖然可以工作 – charlietfl

這是一個好主意使用'屬性開始'並使用this.href而不是創建一個jquery對象。代碼雖然似乎沒有工作....但它好，其他評論者有類似的代碼，工作。謝謝。 – Chris

this.hash確實使第二個評論者的代碼工作。 – Chris

由於在每種情況下href它使相當簡單

$("[href^='#section']").on("click", function() { 
     var targetSelector = $(this).attr('href'); 
     $("html body").animate({"scrollTop":$(targetSelector).offset().top}, 1000); 
     return false; 
});

如果這些元素必須通過父類和標記的普通類或更好的路徑，你可以提高初期選擇性能目標元素相匹配

來源

2015-09-20 00:21:56 charlietfl

非常感謝。我沒想過試試$（$（this）.attr（'href'））。offset（）.......因爲這不起作用$（this）.attr（'href'）。 – Chris

使用jquery'this'來濃縮代碼

回答

相關問題