一个文本区域的多个按钮答案

【问题标题】：multiple buttons with one text area一个文本区域的多个按钮
【发布时间】：2014-01-14 12:23:50
【问题描述】：

我刚刚开始使用 CSS，我对它了解不多，这就是我寻求帮助的原因。

我想要 3 个按钮，其中只有一个文本区域（不可编辑）在我单击按钮时会发生变化。如我的屏幕截图所示，单击 1 后，我显示了文本 bla bla bla。如果我点击按钮 2，我想要 blo blo blo 替换 bla bla bla。

干杯

【问题讨论】：

听起来是个很棒的项目。你有什么问题？
I want to have... 不是问题
对不起尼克，我写得太快了。

标签： css button

【解决方案1】：

使用 Javascript 完成的简单示例。（根据点击的按钮传递不同的参数）

小提琴：http://jsfiddle.net/gHb2u/1/

代码：

<script type="text/javascript">
    var changeText = function(buttonId){
    var label = document.getElementById('label');
    if (buttonId == 1){
        label.innerHTML = "1";
    }
    else if (buttonId == 2){
     label.innerHTML = "2";
    }
    else{
     label.innerHTML = "3";
    }
}
</script>

<button onclick="changeText(1)">1</button>
<button onclick="changeText(2)">2</button>
<button onclick="changeText(3)">3</button>

<label id="label">Text</label>

【讨论】：

【解决方案2】：

你可以使用 jQuery 来做到这一点

脚本：

$('button').click(function(){
   var b= this.id;
    var txt=$("#txt");
    if(b==="b1")
        txt.val("bla bla bla");
    else if(b==="b2")
        txt.val("blo blo blo");
    else if(b==="b3")
        txt.val("ble ble ble");
});

HTML：

<textarea id="txt">bla bla bla</textarea>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>

FIDDLE DEMO

【讨论】：