一个图像网格,当我点击包含图像的div时,选择的div应该改变背景。现在它只做了第二次,当检查页面源代码时,我可以看到添加了更改背景style=“background-color: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);">
更改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://jsfidle.net/lalji1051/uzb4r59s/