javascript - 根据单击的按钮输出到特定容器

Question

我正在开发一个项目，当前单击按钮时会生成随机字符串到容器中。我现在正在努力做的就是这个。我将在页面上添加 4 个以上按钮，单击每个按钮时，它将显示该用户按钮的特定字符串。我对 if/else 逻辑很满意，但我不熟悉 jQuery，并且对 HTML 相当生疏。这是我必须开始的，即随机字符串。如何在 if/else 语句中单击时让多个容器输出并引用不同的按钮？

          function change_string()
          {
          var $container = $('.container');
          $container.html('');


              var myString= streams.home[myStringNo];
              var $myString= $('<div></div>');
          $myString.text('@' + myString.user + ': ' + myString.message + 'Generated:     ' + timeStamp);
              $myString.appendTo($container);
              myStringNo ++;

          };

感谢任何帮助，因为我更熟悉生成字符串的基本 JS，而不是如何根据按钮按下和容器方面实际激活。

Answer 1

这将是 HTML5 data attributes 的一个很好的用例。检查该链接以获取有关如何使用它们的更多信息。我会做这样的事情:

HTML

<div>
    <table>
        <tr>
            <td><button data-target="#first">First</button></td>
            <td><button data-target="#second">Second</button></td>
            <td><button data-target="#third">Third</button></td>
            <td><button data-target="#fourth">Fourth</button></td>
        </tr>
    </table>
    <div id="first" class="string-target"></div>
    <div id="second" class="string-target"></div>
    <div id="third" class="string-target"></div>
    <div id="fourth" class="string-target"></div>
</div>

JS

$('button').on('click', function(e) {
    var target = $(this).data('target');
    $(target).text('Random String'); // Here's where your code for changing the random strings would go.
});

这是一个 jsFiddle，您可以看到它的工作情况:http://jsfiddle.net/voveson/ah0zt2y4/