Question

我正在使用PHP从数组创建一堆颜色样本。

这是PHP代码（我已经删除了数组中的一些颜色，使代码更短，实际上还有更多）。

$colors = array(
        "Light Blue"=>"198,248,253",
        "Medium Blue"=>"112,204,246",
        "Blue"=>"84,140,242",
        "Dark Blue"=>"52,55,199",
        "Dark Green"=>"53,172,58",
        "Light Green"=>"191,235,104"
    );

    echo "<label>Color:</label>";

    foreach ($colors as $colorName => $colorCode) {
        echo "<div style='background-color:rgb(".$colorCode.");' class='swatch' id='".str_replace(" ","_",$colorName)."'></div>";

    }

我想，当用户选择（点击）一个样本时，会添加一个CSS边框以突出显示用户的选择。

我尝试了以下JQuery，但似乎无法使其正常运行。

$(document).ready(function() {

    $(document).on('click', 'div', function () {

        $(this.id).css('border','solid 1px black');

});

}）;

我确信这很简单，只是因为我缺乏使用JQuery的经验。任何帮助赞赏。谢谢，

Dingo Bruce

Answer 1

您知道每个动态创建的class都有一个element。所以，只需使用event delegation并添加css点击class，而不是element，如下所示：

$(document).on('click','.swatch',function(){
    $(this).css('border','solid 1px black'); //$(this) refers to current element here
});

根据@Anders评论，如果您想要删除所有其他divs与类swatch的边框，并且只想保留当前点击的项目，那么这段代码可以帮助您实现同样的目标。

$(document).on('click','.swatch',function(){
    $('.swatch').css('border','0px');
    //if you don't have any extra inline styling then you can directly remove your 
    //style attribute with $('.swatch').removeAttr('style'); Use either of one
    $(this).css('border','solid 1px black'); //$(this) refers to current element here
});

使用JQuery为多个动态创建的div（未知div ID）更改CSS

1 个答案: