Question

我有一个动态生成的div列表，所有div都包含唯一的data-id和包含的几个图像图标。单击图标时，会弹出一个框，允许根据所选操作进行选择。这通过ajax更新数据库。

当ajax reauest返回3时，我需要更改第一个图标。

var ls="<div class='list_body'>
            <div class='lister1'>
                <img src='"+path+stat1+"' data-icon_no='1' data-status='"+split_stats[0]+"' data-job_id='"+split_stats[18]+"' />
                <img src='"+path+stat2+"' data-icon_no='2' data-status='"+split_stats[1]+"' data-job_id='"+split_stats[18]+"' />
                <img src='"+path+stat3+"' data-icon_no='3' data-status='"+split_stats[2]+"' data-job_id='"+split_stats[18]+"' />
                <img src='"+path+stat4+"' data-icon_no='4' data-status='"+split_stats[3]+"' data-job_id='"+split_stats[18]+"' />
                <img src='"+path+stat5+"' data-icon_no='5' data-status='"+split_stats[4]+"' data-job_id='"+split_stats[18]+"' />
                <img src='"+path+stat6+"' data-icon_no='6' data-status='"+split_stats[5]+"' data-job_id='"+split_stats[18]+"' />
            </div>
            <div class='lister'>"+split_stats[6]+" "+split_stats[7]+" "+split_stats[8]+"<br />["+split_stats[13]+"]"+"</div>
            <div class='lister'>"+split_stats[14]+"</div>
            <div class='lister'><a href='javascript:void(0);' class='lister_a'>View Appointment &amp; Actions</a></div>
        </div>";

（我试图将代码空间化以使其更具可读性，但基本上这只是附加到文档中的一行代码）

到目前为止我的jQuery是......

$(document).on('click', '.submit_acc', function(){
        var selected=$('.conf_app').val();
        var agent=$('body').data('agent_id');

        if(selected==0)
        {
            alert("Please make a selection from the available options.");
            return;
        }

        var reason=$('.ag_com').val();
        var data="agent_id="+agent+"&selected="+selected+"&reason="+reason+"&job_id="+gl_job_id;
        alert(data);
        $.ajax({
            type:"POST",
            url:"admin_includes/conf_job.php",
            data:data,
            context:gl_job_id,
            success:function(html){

                if(html=="3")
                {
 //this is where I can't get it to work......
                    $('.lister1[data-job_id="'+gl_job_id+'"'').find('img').eq(0).src("images/icons/start_green.png");

                }
            }
        })//end ajax

});

我无法识别要更改图像的行。

gl_job_id是一个全局变量，它包含job_id，用作data-job_id中的标识符（这有意义吗？）..

目前这会在选择器行上引发错误，但显然语法完全错误：（

Answer 1

错误的选择器：

$('.lister1[data-job_id="'+gl_job_id+'"'').find('img').eq(0).src("images/icons/start_green.png");

您尝试按div选择data-job_id，同时删除一个'并添加]

这样的事情必须是：

$('.lister1 [data-job_id="'+gl_job_id+'"]').attr('src', "images/icons/start_green.png");

此代码选择div，然后按data-job_id查找并设置src属性

jQuery基于数据属性更改图像src

1 个答案: