2

我要做的是定位一个 div 并根据按钮单击用文本填充它。会说，三个按钮，用户单击第一个按钮，文本填充在下面的文本框中。

这是我的脚本代码：

<script type="text/javascript">
$(document).ready(function (){
$('#button1').click(function (){
            $('#textbox').empty();
    $('#textbox').prepend('Some text from Button 1');
});
});
</script>

这是我到目前为止所拥有的：http: //jsfiddle.net/nzTwU/

这是我在这个网站上的第一个问题，所以如果有什么不对的地方，我很抱歉。我以前也从未使用过 jsfiddle，所以我希望这也是正确的。如果不是让我知道。

现在第一个按钮工作正常，我已经先清空了 div，所以如果你多次单击该按钮，它不会一遍又一遍地输入相同的文本。如何为其他按钮编写相同的脚本？我是否使用 if 语句？对于我正在尝试做的事情，是否有更好或更合适的方法？还是我想做的甚至可能？我对 jQuery 有非常基本的了解，但我不确定如何去做。

感谢您的任何建议！

4

3 回答 3

1 
(document).ready(function (){
$('#button1').click(function (){
            $('#textbox').empty();
    $('#textbox').prepend('Some text from Button 1');
});
  $('#button2').click(function (){
            $('#textbox').empty();
    $('#textbox').prepend('Some text from Button 2');
});
     $('#button3').click(function (){
            $('#textbox').empty();
    $('#textbox').prepend('Some text from Button 3');
});
});

这是我编辑过的 jsfiled

http://jsfiddle.net/nzTwU/3/

于 2013-02-07T21:15:57.047 回答
1

如果您不希望菜单中的所有按钮都添加文本，我会为您的按钮添加一个类。

此外，除非您想在 click 事件中为每个文本框硬编码 if 语句，否则您可以使用data元素将唯一文本添加到每个按钮：

<ul id="menu">
    <li class="buttons">
        <button id="button1" class="addtext" data-text="Some text from button 1">Button 1</button>
    </li>
    <li class="buttons">
        <button id="button2" class="addtext" data-text="Some other text from button 2">Button 2</button>
    </li>
    <li class="buttons">
        <button id="button3" class="addtext" data-text="Even more text from button 3">Button 3</button>
    </li>
</ul>
<div class="clear"></div>
<div id="textbox"></div>

这样你就可以只写一个简单的函数并准备好文本：

$(document).ready(function () {
    $('.addtext').click(function () {
        $('#textbox').text($(this).data("text"));
    });
});

和一个很好的衡量标准的jsFiddle。

于 2013-02-07T21:25:12.790 回答
-1 
$('.buttons button').click(function (){
            $('#textbox').empty().prepend('Some text from ' + $(this).attr('id'));
});

使用您的课程将li其应用于所有内容。在这个测试用例中，我们只获取点击的 ID 并将其用于文本。

由于您要跨多个相似对象寻找相同的功能，因此最好稍微抽象一下您的代码并将您的输出基于操作发生的元素。

http://jsfiddle.net/nzTwU/5/

于 2013-02-07T21:21:06.310 回答