jQuery：用不同的按钮显示不同的文本答案

【问题标题】：jQuery: show different text with different buttonsjQuery：用不同的按钮显示不同的文本
【发布时间】：2014-02-07 19:34:41
【问题描述】：

我首先尝试了这段代码，它可以工作。

$(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：你好按钮2：你好 button3：你好

有什么建议吗？

【问题讨论】：

有与此相关的 HTML 吗？

标签： jquery button text show

【解决方案1】：

你可以这样做：

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

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

fiddle

在您的点击处理程序中，$(this) 将引用被点击以触发事件的元素，因此您可以抓取它的文本或值，或者在其上存储一些任意文本作为数据属性。

【讨论】：

【解决方案2】：

DEMO

首先为按钮提供一个通用类（例如，k-button），这样比枚举所有 ID 更简洁。

然后你可以这样做：

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

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

【讨论】：

谢谢，我加了 $('#textbox').empty();清空文本框，然后代码就像我想要的那样工作。

【解决方案3】：

您可以使用自定义 data-* 属性 来存储文本。

例子

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

【讨论】：