2

私が探しているのは、divをターゲットにして、ボタンのクリックに応じてテキストを入力することです。たとえば、3つのボタンがあり、ユーザーが最初のボタンをクリックすると、下のテキストボックスにテキストが入力されます。

これが私のスクリプトコードです：

<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

メニューのすべてのボタンにテキストを追加したくない場合に備えて、ボタンにクラスを追加します。

dataまた、クリックイベントの各テキストボックスのifステートメントをハードコーディングする場合を除いて、要素を使用して各ボタンに一意のテキストを追加できます。

<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>

そうすれば、1つの単純な関数を記述して、テキストをすべて準備できます。

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

そして、適切な測定のためのjsFiddle。

于 2013-02-07T21:25:12.790 に答える
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/

于 2013-02-07T21:15:57.047 に答える
-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 に答える