Question

我正在尝试更改img标签的src属性，具体取决于ajax请求的结果。该请求返回一个json，一切正常，如果测试到达代码的正确部分，它会在浏览器控制台上显示预期的输出，但src属性未更改。

我已经尝试使用以下方法删除此img元素：

$('#l'+generatedId).remove();

，然后通过执行以下操作在父元素内创建一个新对象：

$('#msgid'+generatedId).append('<img id="l'+generatedId+'" src="newpath" />');

但是我没有成功，什么也没发生。

“完整”代码：

var generatedId=0;

function doSomething(){

$('#msg').append('<p class="msg2" id="msgid'+generatedId+'" data-sid="msgid'+generatedId+'">'+$('#msgtxt').val()+'<img id="l'+generatedId+'" src="url/load.svg" /></p>');

$.ajax({
    data: $('#enviaChat').serialize(),
    url: 'assets/lib/msg.php',
    type: 'POST',
    cache: false,
    success:function(data){
        var msgReturn = JSON.parse(data);
        console.log(data);
        if(msgReturn.status=='ok'){
        $('#l'+generatedId).attr('src','url/ok.png');
            }
          }
});
generatedId++;
}

我还想更改相应img标签的“ data-sid”属性 json返回的ID msgid值，但目前它也没有改变，我认为这是同样的问题。

正如我所说，浏览器控制台窗口中的控制台输出符合预期：

{"status":"ok","msgid":"8"}

-编辑1：

伙计们，我在“确定”条件下添加了一些代码

console.log('Before:'+$('#l'+generatedId).attr('src'));
$('#l'+msgnova).attr('src','url/msgok.png');
console.log('After:'+$('#l'+generatedId).attr('src'));


The result is First: undefined / After: undefined. So I guess the element is not being found. So the conlusio is the element is not in the DOM. Does anyone had this problem? I also tried to create the <p> parent first and then append the <img> but it doesn't work also.

Answer 1

我认为这是一个范围问题，由于某种原因，成功块无法使用jquery选择器“查看”元素。解决方案是创建一个变量并为其赋予属性：

var generatedId=0;

function doSomething(){

$('#msg').append('<p class="msg2" id="msgid'+generatedId+'" data-sid="msgid'+generatedId+'">'+$('#msgtxt').val()+'<img id="l'+generatedId+'" src="url/load.svg" /></p>');
**var createdElem = $('#l'+generatedId);**
$.ajax({
    data: $('#enviaChat').serialize(),
    url: 'assets/lib/msg.php',
    type: 'POST',
    cache: false,
    success:function(data){
        var msgReturn = JSON.parse(data);
        console.log(data);
        if(msgReturn.status=='ok'){

        //line below was altered
        createdElem.attr('src','url/ok.png');
        //instead of $('#l'+generatedId).attr('src','url/ok.png');

            }
          }
});
generatedId++;
}

Answer 2

当您尝试通过

在父级内部创建子级元素时

$('#parentElement'+generatedId).append('<img id="#img'+generatedId+'" src="newpath" />');

确保父节点实际存在，否则append()方法将不起作用。也许首先尝试（通过附加）创建$('#parentElement'+generatedId)这个元素，然后附加子图像。我会对此发表评论，但还没有那些特权。希望这会有所帮助。

Answer 3

在附加img标签时，删除ID中的＃属性。您不希望实际的id属性中包含“＃”，仅当jquery选择器时才需要它：

$('#msgid'+generatedId).append('<img id="l'+generatedId+'" src="newpath" />');

Answer 4

$.ajax是异步的，并且在ajax请求之后就拥有generatedId++;。更改src后，需要将其移至成功函数中。

当您的POST响应返回时，您的generateId已增加，无法在DOM中找到generateId。

$.ajax({
    data: $('#enviaChat').serialize(),
    url: 'assets/lib/msg.php',
    type: 'POST',
    cache: false,
    success:function(data){
        var msgReturn = JSON.parse(data);
        console.log(data);
        if(msgReturn.status=='ok'){
            $('#l'+generatedId).attr('src','url/ok.png');
            generatedId++; // move here
        }
    }
});

为什么此img元素没有被javascript更改？

4 个答案: