在同一页面上打印具有相同功能的数组中的不同内容

Question

我想知道是否可以在一个类中有一个函数，你可以在同一页面上调用它，但它需要从数组中回显不同的东西。

我的意思：

如果这是我的数组：

| Day | Comment |
|-----|---------|
|  1  |  hallo  |
|-----|---------|
|  2  |  hey    |
|-----|---------|
|  3  |  hello  |
|_____|_________|

如果我点击第 1 天，应该会出现数组中第 1 天的内容，如果我点击第 2 天，应该会出现第 2 天的内容。

是否可以创建一个函数来执行此操作，并且我可以使用相同的函数在同一页面上回显。 喜欢：

--------------------------------------------
|   <div id="day1"> content day 1 </div>   |
|   <div id="day1"> content day 2 </div>   |
|   <div id="day1"> content day 3 </div>   |
--------------------------------------------

Answer 1

是的，如果您使用 JQuery 是可能的，但这可能看起来像是一个中间解决方案，所以我会尽力解释。您可以参考下面的代码并将它们与您的 PHP 放在同一页面中。

1) 首先在您的标题处加载 Jquery，并假设您的数组变量名为 myarray。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

2) 最好在页面顶部添加以下脚本部分。

<script type="text/javascript">
   $('#day1').click(function(){
      $(this).html(myarray[0]);
   });

   $('#day1').click(function(){
      $(this).html(myarray[1]);
   });

   $('#day1').click(function(){
      $(this).html(myarray[2]);
   });
</script>

3) 代码说明，Jquery 通过定位任意元素的id 或class 并执行一些操作来工作。当用户单击或执行操作时（在您的情况下，我会假设单击 div）Jquery 将引用上面的脚本并查看它是否与任何 div 的 id 匹配。如果找到匹配项，则会触发点击功能并执行任务。

4) $(this).html 是一个在 div 的内容之间显示 html 或文本的函数，在这种情况下，这将是您的数组的值。 this 表示用户点击的元素，根据id 名称变化。

尝试一下，Jquery 的功能会让您印象深刻，很快您就会沉迷其中。 :) 干杯！

5) 一个更可重用和动态的函数，当添加更多时，它将裁剪出id's 名称以选择数组。

在 div html 代码中，请为所有 div 添加一个类，如下所示。

<div class='onClickLoadArray' id='day1'></div>

<script type="text/javascript">

   $('.onClickLoadArray').click(function(){
      var tmpArrayCount = ($(this).attr('id').replace('day', ''))-1;
      $(this).html(myarray[tmpArrayCount]);
   });

</script>

我还没有对此进行测试，但这应该可以工作，它会将 div 的 id 剥离为一个数字，然后减去 1，因为数组从 0 开始。然后将数组的值加载到单击它的 div 中。