Question

我要做的是定位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有一个非常基本的知识，我不确定如何解决这个问题。

感谢您提供任何建议！

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

这里是我编辑的jsfidle

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

Answer 2

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

此外，除非您想在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表示好的措施。

Answer 3

$('.buttons button').click(function (){
            $('#textbox').empty().prepend('Some text from ' + $(this).attr('id'));
});

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

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

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

jQuery针对同一元素的多个按钮

3 个答案: