change existant CSS class proprety with jQuery and PHP

Question

i'm new with jQuery ! i have a CSS file named "Slider.css" that contains the following code :

.banner1 {
    /*background: url(../images/bnr1.jpg) no-repeat 0px 0px;*/
    background-size: cover;
    min-height: 650px;
}

.banner2 {
   /* background: url(../images/bnr2.jpg) no-repeat 0px 0px;*/
    background-size: cover;
    min-height: 650px;
}

.banner3 {
   /* background: url(../images/bnr3.jpg) no-repeat 0px 0px;*/
    background-size: cover;
    min-height: 650px;
}

what i want is to change the url of the background in page called home.ctp according to data that i get from database so i tried this :

  <?php $i=1; ?>
     <?php foreach ($query as $slider): ?> // query contain 3 items
         <div  class="slid banner<?= $i; ?>">
               <div class="caption">
                       <h3><?= $slider->titre; ?></h3>
                        <p><?= $slider->contenue; ?></p>
                        <a href="#" class="button">know more</a>
                  </div>
            </div>
                <script>
                   // alert(".banner<?= $i; ?>");
                    $(".banner<?= $i; ?>").css({"background": "url(../images/<?= $slider->url ?>) no-repeat 0px 0px;"})
                </script>
                <?php $i++; ?>;
            <?php endforeach; ?>

So i tried $(".banner<?= $i; ?>").css({"background": "url(../images/<?= $slider->url ?>) no-repeat 0px 0px;"}) but it doesn't change anythnig..

How can i change the css of Slider.css from php Loop using jQuery ! Thanks for help

Just a generic advise: please do not mix server side code (php) with client side (html/js), if not for trivial code... — MarcoS
– MarcoS, Commented Apr 20, 2016 at 15:31
And, you don't expect slider.css file to be changed, right? $(element).css(property, value) only changes DOM... — MarcoS
– MarcoS, Commented Apr 20, 2016 at 15:32

Preston S · Accepted Answer · 2016-04-20 15:36:53Z

5

Basically, you're doing it wrong. You don't need and shouldn't be using jQuery for this.

This is what you want:

.banner {
  background-size: cover;
  min-height: 650px;
}

<?php foreach ($query as $slider): ?>// query contain 3 items
<div class="slid banner" style="background: url(../images/<?= $slider->url ?>) no-repeat 0px 0px;">
  <div class="caption">
    <h3><?= $slider->titre; ?></h3>
    <p>
      <?=$ slider->contenue; ?></p>
    <a href="#" class="button">know more</a>
  </div>
</div>
<?php endforeach; ?>

answered Apr 20, 2016 at 15:36

Preston S

2,80126 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Youssef DRISSI Over a year ago

Thnk you a lot for your answer ! i removed all the classes ( banner1/2/3) from slider.css and added them in style option of the div and it works now !

Jordi Nebot · Accepted Answer · 2016-04-20 15:44:35Z

3

You don't need jQuery to achieve this. If $slider->url contains the URL of your background image, just do:

<?php $i = 1; foreach ($query as $slider): ?>
  <div class="slid banner<?php echo $i; ?>" style="background-image: url(<?php echo $slider->url; ?>)">
    // ...
  </div>
<?php $i++; endforeach; ?>

Indeed, your CSS already defines the background image, you shouldn't even need this. Just the <div class="slid banner<?echo $i; ?>"> does the trick.

answered Apr 20, 2016 at 15:44

Jordi Nebot

3,3973 gold badges32 silver badges61 bronze badges

1 Comment

Jordi Nebot Over a year ago

By the way, if you need an index inside your loop, consider using for instead of foreach.

Collectives™ on Stack Overflow

change existant CSS class proprety with jQuery and PHP

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related