未使用javascript更新的div元素

问题描述：

您能否看到为什么div（＃welcome）未在下面的代码中更新？未使用javascript更新的div元素

function show_logged_in(success) 
{ 

    var is_logged_in = success; 

    var dataString = {"reg":invalid, "login":invalid,"is_logged_in":is_logged_in}; 

    $.ajax({ 
     type:"POST", 
     url:"PHP/class.ajax.php", 
     data:dataString, 
     dataType:'JSON', 
     success: function(username) { 
      alert("User is shown"); 
      user = username; 
      change_div(); 
     }, 
     error: function() { 
      alert("ERROR in show_logged_in") 
     } 
    }); 

function change_div(){ 
    $('#welcome').style.display = 'block'; 
    $('#welcome').innerHTML = "Welcome" + user + "to SIK"; 
    } 

}

来自被调用的ajax的响应仅仅是从会话变量中获取用户名。并且它正确返回。

当它返回时，我想让div出现并说欢迎。但由于某些原因div未被更新。

下面是HTML：

<div id="welcome" style="display:none; postion:absolute; top:0; float:right;">...</div>

答

你不能这样做

$('#welcome').style.display = 'block'; 
$('#welcome').innerHTML = "Welcome" + user + "to SIK";

使用jQuery。这是因为$('#welcome')你抓住了jQuery对象，而不是DOM元素。

要使用jQuery做到这一点：

$('#welcome').html('Welcome' + user + 'to SIK').show(); // Brought up in comments 

$('#welcome').show(); // Old 
$('#welcome').html('Welcome' + user + 'to SIK'); // Old

或者，如果你真的想抓住的DOM元素：

$('#welcome')[0].style.display = 'block'; 
$('#welcome')[0].innerHTML = "Welcome" + user + "to SIK";

哦确定为什么是它与jQuery有什么不同？虐待现在试试这个谢谢 – 2013-03-20 12:00:34

更新，以帮助解释更多。 '$（'＃welcome'）'是一个jQuery对象，而不是DOM元素，因此您必须使用jQuery方法对其进行更改。 – 2013-03-20 12:02:25

@TomBurman jQuery对象没有.style，但是有'attr（'style'）' – 2013-03-20 12:02:26

答

@Jeff剃须刀是正确的，但传递user作为参数change_div(user);

然后

function change_div(user){ 
     $('#welcome').show(); 
     $('#welcome').html('Welcome' + user + 'to SIK'); 
}

我假设用户是一个全局变量，因为他不使用'var'来声明它。我只是假定它是在函数之外声明的。但如果这是一个问题，这将解决它。 – 2013-03-20 12:06:56

他缺乏使用'var user ...'声明本地“用户”的方法在全局上下文中创建用户属性，因此可以解析。这就是说，这是一个更好的方法来实际做到这一点，但这不是他的问题。 – 2013-03-20 12:07:47

答

display属性不存在。

$('#welcome').style.display = 'block';

使用这个代替：

$('#welcome').css({"display":"block"});

答

我会坚持与此代码纯JS。

var welcome = document.getElementById('welcome'); 

function change_div(){ 
    welcome.innerHTML = "Welcome" + user + "to SIK"; 
    welcome.style.display = 'block'; 
}

是投票了最高性能的解决方案，但upvote甚至不缓存jQuery对象：P。 – Simon 2013-03-20 12:09:46

答

试试这个朋友。

$.ajax({ 
     type:"POST", 
     url:"PHP/class.ajax.php", 
     data:dataString, 
     dataType:'JSON', 
     success: function(username) { 
      alert("User is shown"); 
      user = username; 
      change_div(user); 
     }, 
     error: function() { 
      alert("ERROR in show_logged_in") 
     } 
    }); 

function change_div(user){ 
    $('#welcome').css("display","inline"); 
    $('#welcome').append("Welcome" + user + "to SIK"); 
    }

未使用javascript更新的div元素

相关推荐