Распечатывать разные вещи из массивов с одинаковыми функциями на одной странице

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.Если совпадение найдено, оно вызовет функцию щелчка и выполнит задачу.

4) $(this).html - это функция для отображения html или текста между содержимым div, в данном случае это будет значение вашего массива,this означает элемент, по которому пользователь щелкает и изменяется в зависимости от id имени.

Попробуйте, вы будете впечатлены тем, что может сделать Jquery, и вскоре вы будете зависимы от него.:) Ура!

5) Более динамичная и многократно используемая функция, которая будет выдвигать имя id's для выбора массива при добавлении новых.

В HTML-коде div добавьтеКласс для всех 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 до числа, а затем вычтет на 1, потому что массив начинается с 0. Тогдазагрузить значение массива в div, который щелкает по нему.