jQuery的：顯示不同的文本有不同的按鈕

Question

我第一次嘗試這個代碼在它的工作原理。

$(function(){ 
    $('#k1').click(function(){ 
     $('#textbox').empty(); 
     $('#textbox').prepend('hello'); 
    }); 
    $('#k2').click(function(){ 
     $('#textbox').empty(); 
     $('#textbox').prepend('hola'); 
    }); 
    $('#k3').click(function(){ 
     $('#textbox').empty(); 
     $('#textbox').prepend('bonjour'); 
    }); 
}); 

但是，我必須只有一個事件處理程序，我敢肯定上面的代碼不算一個。我需要的是三個不同的按鈕：每個按鈕顯示自己的文本，例如： 按鈕1：你好 BUTTON2：HOLA BUTTON3：卓悅

任何提示嗎？

Answer 1

你可以這樣說：

<input type="text" /> 
<button>Hola</button> 
<button>Hello</button> 
<button>Bonjour</button> 

$("button").on("click", function(){ 
    $("input").val($(this).text()); 
}); 

fiddle

在您單擊處理程序，$(this)將指被點擊觸發事件的元素，所以你可以抓住它的文本或值或存儲作爲數據屬性上的任意文本。

Answer 2

可以使用自定義數據 - *屬性存儲文本。

例

HTML

<input type="text" /> 
<button data-display-text="Hola">k1</button> 
<button data-display-text="Hello">k2</button> 
<button data-display-text="Bobjour">k3</button> 

的JavaScript

$("button").on("click", function(){ 
    $("input").val($(this).data('display-text')); 
}); 

DEMO

或

您可以使用.is()

$('#k1, #k2, #k3').click(function(){ 
    $('#textbox').empty(); 
    if($(this)is('#k1,')) 
     $('#textbox').prepend('hello'); 
    if($(this)is('#k2,')) 
     $('#textbox').prepend('hola'); 
    if($(this)is('#k3,')) 
     $('#textbox').prepend('bonjour'); 
}); 

Answer 3

DEMO

首先給你一個按鈕普通類（例如，k-button）剛剛所以它比枚舉所有的ID清潔。

然後，你可以這樣做：

var helloKeyVal = {"k1":"hello","k2":"hola","k3":"bonjour"} 

$(".k-button").click(function(){ 
    $("#textbox").prepend(helloKeyVal[this.id]); 
});