Jquery - 一個簡單的函數來處理被點擊的16個不同的按鈕？

我正在爲一個網站創建一個交互式顏色取樣器，該取樣器有16種不同的色板可以單擊顯示全尺寸預覽。Jquery - 一個簡單的函數來處理被點擊的16個不同的按鈕？

使用jQuery我有一個功能show_preview(swatch_id)它做所有的好視覺的東西。然而調用該函數，我目前堅持重複16個類似的處理程序：

<div id="#swatch_clicker_1> 
<div id="#swatch_clicker_2> 


$("#swatch_clicker_1").click(function() 
{ 
    show_preview('1'); 
} 
$("#swatch_clicker_2").click(function() 
{ 
    show_preview('2'); 
} 
...

我一直在閱讀輪主題，這裏包括對堆棧溢出，並從另一個答案修改一些代碼。所以如果我要做這樣的事情，它是否仍然有效地運行（如果是的話）！

<div class="swatch_clicker" id="#swatch_clicker_1> 
<div class="swatch_clicker" id="#swatch_clicker_2> 


$(".swatch_clicker").click(function(event) 
{ 
    var clicker_id=event.target.id; 
    show_preview(clicker_id); 
}

感謝，

菲爾

來源

2011-11-17 Philip Jones

好吧，你幾乎沒錯。

這是我會怎麼做：

<div class="swatch_clicker" data-preview-number="1"></div> 
<div class="swatch_clicker" data-preview-number="2"></div> 

<script> 
    $(".swatch_clicker").click(function() { 
     show_preview($(this).data('preview-number')); 
    }); 
</script>

來源

2011-11-17 17:09:46 simshaun

據我所知，數據屬性只是在HTML 5中形式化。這種方法會導致與那些有舊瀏覽器的人有問題嗎？ –

哦，是的......非常感謝你的幫助。 –

不，不會造成問題。實際上，你甚至不必爲這些使用html5規範。你可以簡單地調用這些屬性「preview-number」和jQuery（儘管我不認爲普通的JS）仍然可以訪問它。但是，如果你非常關心有效的HTML，那麼simshaun確實犯了一個錯誤。連字符只能在「數據」一詞之後使用。其餘的應該用下劃線（並且沒有CamelCasing！）。 – maxedison

不完全是，因爲event.target.id將會像 'swatch_clicker_1'。這將工作，雖然：

$(".swatch_clicker").click(function() 
{ 
    var arr = this.id.split('_'); //returns an array like ['swatch','clicker',1] 
    show_preview(arr[arr.length - 1]); //the final item in the array is the number you want 
}

注意，在這種情況下使用的event.target是沒有必要的。 this會給你這個目標。

最後，你不應該在你的html中包含#這個id。

來源

2011-11-17 17:09:27 maxedison

感謝您的幫助。我怎麼能讓'＃'滑入我的html？ –

這將運行一樣好，雖然你可能需要從ID解析出號碼。

來源

2011-11-17 17:09:58 SLaks

Jquery - 一個簡單的函數來處理被點擊的16個不同的按鈕？

回答

相關問題