Question

I was wondering if it’s possible to have a function in a class, that you call on the same page, but it needs to echo different stuff from the array.

What I mean:

If this is my array:

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

And if I click on day 1, the content from the array where day = 1 should appear, if I click day 2, the content of day 2 should appear.

Is it possible to create a function does this and that I can echo on the same page with the same function.
Like:

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

Answer 1

Yes, it is possible if you use JQuery but this might looked like an intermediate solution so I will try my best to explain as much as possible. You can refer to the code below and placed them in the same page as your PHP.

1) Firstly Load Jquery at your header and lets assumed your array variable is named myarray.

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

2) Add the below script section preferably on top of your page.

<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) Explanation of the code, Jquery works by locating id or class of any element and performed some action. When a user clicks or perform an action (in your case, I would assumed by clicking the div) Jquery will refer to the script above and see if it matches any div’s id. If a match is found, it will trigger the click function and perform a task.

4) $(this).html is a function to display html or text between the div’s content, in this case that would be your array’s value. this means the element that the user clicks and varies based on id name.

Try it out, you will be impressed with what Jquery can do and soon you will be addicted to it. 🙂 Cheers!

5) A more reusable and dynamic function that will crop out id's name to select the array when more are added.

In the div html code, please add a class to all the div like below.

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

I didn’t test this yet but this should work, it will strip the div’s id down to a number then subtract by 1 because array starts with 0. Then load the array’s value into the div’s that clicks it.