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

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

 <td headers="header1"><b><a href="www.site.com">TITLE</a></b></td>

JS

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

这是一个jsFiddle，所以你可以看到它有效：http://jsfiddle.net/voveson/ah0zt2y4/