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

但是，我必须只有一个事件处理程序，我很确定上面的代码不算一个。我需要的是三个不同的按钮：每个按钮显示自己的文本，例如： button1：你好 button2：hola button3：bonjour

任何提示？

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

您可以使用自定义 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'); });

Answer 3

DEMO

首先给你按钮一个公共类（例如k-button），这样它比列举所有ID更清晰。

然后你可以做类似的事情：

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

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

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

3 个答案: