onclick 更改背景添加代码，但仅在第二次单击后更改答案

【问题标题】：onclick to change background add code, but only change it after a second clickonclick 更改背景添加代码，但仅在第二次单击后更改
【发布时间】：2021-04-13 12:00:34
【问题描述】：

我是一个图像网格，当我单击包含图像的 div 时，选定的 div 应该改变背景。现在它只这样做了第二次，当检查页面源时，我可以看到添加了代码来更改背景样式=“背景颜色：rgb(xxx,xxx,xxx);”。

CSS

.library-grid-images{
    background-color: #c3c3c3;
}

脚本

function display_image_info(id) {
    // reset all image boxes    
    $(".library-grid-images").css( "background-color", "#c3c3c3");
    //Selected box 
    var divid = "library-image-box-"+id;
    $("#"+divid).on( "click", function( event ) {
        $(event.delegateTarget ).css( "background-color", "#878787");
    });
    $('.library-images-info').load('/fam/library/library-image-info.php?id='+id);
    // image footer actions
    $("#image-actions-footer").css("visibility", "visible");
    $('#id-image-actions-footer').val(id);
};

HTML

 <div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);">

选择时

<div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);" style="background-color: rgb(135, 135, 135);">

当其他选择时

<div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);" style="background-color: rgb(195, 195, 195);">

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

改变JS函数

function display_image_info(id) {
    // reset all image boxes    
    $(".library-grid-images").css( "background-color", "#c3c3c3");
    //Selected box 
    var divid = "library-image-box-"+id;

    //Change Here
        $("#"+divid).css( "background-color", "#878787");
    //END Change
    
    $('.library-images-info').load('/fam/library/library-image-info.php?id='+id);
    // image footer actions
    $("#image-actions-footer").css("visibility", "visible");
    $('#id-image-actions-footer').val(id);
};

https://jsfiddle.net/lalji1051/uzb4r59s/

【讨论】：