試圖縮小對多個ID使用多次的點擊事件？

我試圖減少一些代碼，基本上下面的點擊事件被使用了10次，id爲#topNavA - #topNavJ，事件只有2個部分發生了變化。任何人都可以建議如何爲每次點擊回收此代碼？我已經添加了將從點擊事件更改爲點擊事件的行的評論，但其餘部分保持不變？所有建議歡迎。試圖縮小對多個ID使用多次的點擊事件？

$('#topNavA').click(function() { 
    $footerPush.hide(); 
    $allMultipleElements.hide(); 

    $('#section, #placement, .mobileControls').show(); // This line will change with different selectors 
    $('.mobileControls h1').replaceWith('<h1>Mobilizing Mobile, AL</h1>'); // This line will change with a different header 1 
    $('.mobileControls h2').replaceWith('<h2>Overview</h2>'); // This line will change with a different header 2 
    $('.menuTitle').removeClass('active'); 
    $('.lightbox').remove(); 

    $('#nav li > a').removeClass('active'); 
    $('#nav li span a').css({ 
     'color': '#8F8F8F' 
    }); 

    $('#topNav').addClass('active'); 
    $(this).css({ 
     'color': '#e8af20' 
    }); 
});

感謝凱爾

來源

2011-10-25 styler

一種選擇是使用data。您可以在存儲變量數據的元素上擁有3 data-屬性。是這樣的：

<a href="..." id="topNavA" class="topNavLink" data-selector="#section, #placement, .mobileControls">something</a>

$(".topNavLink").click(function(){ 
    var selector = $(this).data("selector"); 

    $(selector).dosomething(); 
});

和示例技術：http://jsfiddle.net/mPQfJ/1/

來源

2011-10-25 21:16:30

嗨詹姆斯，聽起來很有前途，1個問題我怎麼能每次更新標題？有沒有一個例子可以讓我看到？我還沒有真正使用數據屬性 – styler

你可以爲每個需要的東西添加額外的數據屬性，看起來像你有三個。用於不同目的的多個屬性的示例：http://jsfiddle.net/mPQfJ/2/ –

真棒詹姆斯歡呼！ – styler

我傾向於要解決這一問題，創建我的處理程序，排序的處理程序工廠的功能。外部函數的參數在處理程序的關閉使用：

function getClickHandler(selectors, header1, header2) { 
    return function() {  
     // snip 

     $(selectors).show(); 
     $(header1).replaceWith('<h1>Mobilizing Mobile, AL</h1>'); 
     $(header2).replaceWith('<h2>Overview</h2>'); 

     // snip 
    } 
}

然後你就可以通過調用投手工廠使用特定於該情況下的參數指定的處理程序：

$('#topNavA').click(getClickHandler(
    '#section, #placement, .mobileControls', 
    '.mobileControls h1', 
    '.mobileControls h2' 
));

來源

2011-10-25 21:13:07 nrabinowitz

不是一個完整的答案，但希望有一個好的起點：

而不是使用.click（），您應該使用.live（）或更好的.delegate（）。委派的祖先元素來偵聽符合條件的選擇上點擊：

$('#wrapper').delegate('[id*=topNav]', 'click', function() { 
    // do stuff on click 
})

#wrapper指定任何祖先（你沒有使用一個ID選擇器），它包含所有topNavX元素。對於包含字符串「topNav」的任何ID，[id * = topNav]將進行字符串匹配。

來源

2011-10-25 21:15:00

不匹配元素，但對於每個元件執行的代碼需要略有不同的事實的問題。只是爲了匹配元素，你可以拋出一個類。 –

我認爲這兩者都有點不同。對於原始問題的代碼，他將分配10次點擊次數。我沒有聲稱擁有完整的解決方案。「歡迎所有的建議」意味着他不一定只需要爲他編碼的完整解決方案。 –

試圖縮小對多個ID使用多次的點擊事件？

回答

相關問題