Блог

Мне было интересно, возможно ли иметь функцию в классе, которую вы вызываете на той же странице, но она должна отображать разные данные из массива.

Что я имею в виду:

Если это мой массив:

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

И если я нажму на день 1, должно появиться содержимое из массива, где day = 1, если я нажму день 2, должно появиться содержимое дня 2.

Возможно ли создать функцию, выполняющую это, и что я могу повторить на той же странице с той же функцией. Нравится:

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

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

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, который нажимает на него.