时间戳

首页 > 解决方案 > 卡住：onclick 背景颜色属性正确更改但实际颜色未显示（使用 PHP 循环）

javascript - 卡住：onclick 背景颜色属性正确更改但实际颜色未显示（使用 PHP 循环）

问题描述

我有一个收藏按钮，可以选择当前显示的颜色，然后将该颜色注入收藏栏。我添加了一个 PHP 循环来选择不同的颜色并将它们添加到最后选择的收藏夹旁边。背景属性正在改变，但由于某种原因，它没有显示颜色。

JavaScript：

    $('#fav-colour-pallete-' + id).click(function getFav() { //Button
      var favColor = $('#colour-pallete-' + id).attr('color-hex');
            $('.fav-color-' + id).css('background', '#' + favColor);
                  $('.fav-color-' + id).attr('color-hex', favColor)
      });

 }

HTML：

<div class="col-sm-4 favorites">
        <p class="h6 favorites-title mb-0 mt-2">Favorites:</p>
           <ul class="list-inline favorites-list mb-0">
              <?php for($i=1; $i<=6; $i++) { ?>
                 <li class="list-inline-item fav-color-<?php echo $i; ? 
                     >"></li>
<button id="fav-colour-pallete-<?php echo $i; ?>" class="fav- 
        colour-pallete b  tn btn-secondary palette-btn" type="button">
          <i class="far fa-heart"></i>
        </button>
              <?php } ?>
          </ul>
 </div>

如果我从 HTML 中删除循环并从 JavaScript 中的 fav-color 中删除 ID，它会显示/添加颜色到收藏夹栏，但会替换最后一个收藏夹。

我相信这个问题与循环有关。而且很奇怪，我可以在控制台中看到背景属性正确更改，但颜色实际上并没有改变。

标签： javascriptphphtmlcss

解决方案

您在脚本中定位的#id 在哪里？它不是来自 PHP 循环。这是您的脚本的定位错误。尝试粘贴

  • 手动，你会遇到同样的问题。（不要忘记更改 fav-color 的索引 :)

    • 推荐阅读