CODEWITHSUNDEEP
phpjqueryarrays
Ande Timmerman
Ande Timmerman

Reputation: 23

For each array item another background-color on linked page

I have created an array with 8 items.

Now on page 1 I have for each array-item a html link. Each array-item has a different color. When clicked on one of the 8 html links it will redirect to page 2. There I want that a div-background gets the color linked to an array item.

My php-code generates for each array item a classname: .feeling1, .feeling2, .feeling3, .feeling4, .feeling5, ... Now this seemed easy by simply saying when clicked on an element with class name (for example) .feeling1 then change the background-color of the div (id="resultaat") on page 2. But apparently this code won't work...

Anyone a solution for this? Thanks in Advance.

Example of one array item:

        [
        "mood" => "social",
        "number"=>"feeling4",
        "name"=>"DOK FLEA MARKET",
        "picture" => "images/treasures/social.png",
        "about" => "Every Sunday till the end of September there's a flea  market full with people selling their odds and ends, homemade stuff and art ",
        "street"=>"Koopvaardijlaan 4",
         "city"=>"GHENT",
        "days"=>"opening days: Sunday",
        "hours"=>"opening hours: 10:00AM-6:00PM "

        ],

Page 1:

<body>
<!--CONTAINER-->
<div id="container">

    <!--HEADER-->
    <header>
        <h1 id="headertitel">PICK YOUR MOOD</h1>
    </header>

    <!--SECTION-->
    <section id="middenstuk">

        <ul class="list">

            <?php foreach ($arr_artist as $key=> $artist) { echo "
            <li class='".$artist[' number ']."'><a href='3.php?id=".$key."' class='feeling".$artist[' mood '].", trala'>".$artist['mood']."</a>
            </li>"; } ?>

        </ul>

        <script>
            $(".feeling").mousedown(function () {
                $(this).addClass('slideright');
            });
        </script>

    </section>

    <!-- FOOTER -->
    <footer>

        <a class="linkhome1" href="4.php">
            <div class="locatie"></div>
        </a>
        <a class="linkhome1" href="index.php">
            <div class="home"></div>
        </a>

    </footer>
</div>

The Jquery code:

  $(".feeling2").click(function () {
      $("#resultaat").css("background-color", "red");                      
  });

Upvotes: 0

Views: 135

Answers (2)

Ande Timmerman
Ande Timmerman

Reputation: 23

I have found the solution for my "problem" simply by adding this code on page 2: 

<div class="<?php echo $arr_artist[$artist_id]['number']?>" id="resultaat">

Upvotes: 1

guest271314
guest271314

Reputation: 1

If interpret question correctly , two html exist. At "page1" click on <a> element should render specific element #resultaat background red at "page2" ?

Try

at "page1"

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.js">
</script>
</head>
<body>
<ul>
<li><a class="feeling2" href="page2.html">feeling 2</a>
</ul>
<script>
  $(".feeling2").click(function (e) {
    // pass settings to `page2` by appending `"?id=resultaat&background=red"`
    // to `.feeling2` `.href`
    e.target.href = e.target.href + "?id=resultaat&background=red";
  });
</script>
</body>
</html>

at "page2"

<!DOCTYPE html>
<html>
<script src="jquery-1.11.3.js">
</script>
</head>
<body>
         <div id="resultaat">
            <img src="images/moods/lazy180.png" alt="Logo" />
            <img src="" class="moodpics" alt="artist name" />
            <!--<p>description</p>-->
            <p class="about">about</p>
            <p class="street">street</p>
            <p class="city">city</p>
            <p class="days">days</p>
            <p class="hours">hours</p>
            <a class = "vernieuwen" href="3.php?id=1" ><div class=""></div></a>
        </div>
<script>
$(document).ready(function() {
  // parse `location.search` `?id=resultaat&background=red` ,
  // set at `click` of `.feeling2` at `page1` 
  var mood = location.search.slice(1).split(/=|&/);
  // select element having `id` `resultaat` , 
  // set `$("[id=resultaat]")` `css` `background`:`red`
  $("["+mood[0]+"="+mood[1]+"]").css(mood[2], mood[3]);
})
</script>
</body>
</html>

Upvotes: 1

Related Questions