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

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 的名称以选择数组。

在 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 中。