使用 jQuery 和 PHP 更改现有的 CSS 类属性答案

【问题标题】：change existant CSS class proprety with jQuery and PHP使用 jQuery 和 PHP 更改现有的 CSS 类属性
【发布时间】：2016-08-13 09:45:54
【问题描述】：

我是 jQuery 的新手！我有一个名为 "Slider.css" 的 CSS 文件，其中包含以下代码：

.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;
}

我想要的是根据我从数据库获得的数据更改名为 home.ctp 的页面中背景的 url，所以我尝试了这个：

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

所以我尝试了$(".banner<?= $i; ?>").css({"background": "url(../images/<?= $slider->url ?>) no-repeat 0px 0px;"})，但它并没有改变任何东西..

如何使用 jQuery 从 php Loop 更改 Slider.css 的 css ！感谢您的帮助

【问题讨论】：

只是一个通用的建议：如果不是为了琐碎的代码，请不要将服务器端代码 (php) 与客户端 (html/js) 混合使用...
而且，你不希望slider.css file 被改变，对吧？ $(element).css(property, value) 只改变 DOM...

标签： php jquery css

【解决方案1】：

基本上，你做错了。您不需要也不应该为此使用 jQuery。

这就是你想要的：

.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; ?>

【讨论】：

非常感谢您的回答！我从slider.css 中删除了所有类（banner1/2/3），并将它们添加到 div 的样式选项中，现在可以使用了！

【解决方案2】：

您不需要 jQuery 来实现这一点。如果$slider->url 包含您的背景图片的 URL，只需执行以下操作：

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

确实，您的 CSS 已经定义了背景图片，您甚至不需要它。只需 <div class="slid banner<?echo $i; ?>"> 即可。

【讨论】：

顺便说一下，如果您需要在循环中使用索引，请考虑使用for 而不是foreach。