jQuery代碼沒有產生預期的效果

我試着寫代碼的HTML，看到的樣子jQuery代碼沒有產生預期的效果

socket.on('listUser', function(data){ 
      console.log(data); 
      console.log(socket.id); 
      for(var i =0 ; i<data.length; i++){ 
      $('#listUser').append('<a href ="#" id="'+data[i].name+'" class="list-group-item" value="'+data[i].socketId+'">' +data[i].name+ '</a>'); 
      } 
     }); 

     $('a').each(function(){ 
      console.log($(this).attr('id')); 
      /*$(this).click(function(){ 

      });*/ 
     });

和我有兩個元素HTML

<a id ='list' class = "list-group-item active">List User</a> 
<a id ='message' class = "list-group-item active">Your name</a>

但是當我嘗試運行我的代碼JS，我只得到2值：id = list和id =消息。這是爲什麼？

來源

2015-11-05 TungLoGach

我只得到2值：ID =列表和id =消息。 ??所以你想要做什麼？簡單解釋一下。 –

您可以在jsFiddle或SO的預覽器中創建和分享問題演示嗎？ –

因爲我有2個元素 List User Your name 在html代碼中 – TungLoGach

這是我的代碼：

<!DOCTYPE html> 
<!-- saved from url=(0040)http://getbootstrap.com/examples/signin/ --> 
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="icon" href="http://getbootstrap.com/favicon.ico"> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" > 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" > 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <title>Signin</title> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="/socket.io/socket.io.js"></script> 
    <style type="text/css"> 
    #viewContent{ 
     color: black ; 
     height: 400px; 
     background-color: #F5F5F5; 
     overflow: scroll; 
    } 
    #listUser{ 
     height: 400px; 

    } 
    </style> 
    </head> 

    <body> 

    <div id='header'> 
     <h2 class="title">This is chat box</h2> 
    </div> 

    <div id='content' > 
     <div id='listUser' class='col-md-4'> 
     <a id ='list' class = "list-group-item active">List User</a> 
     </div> 

     <div name='chatbox' class='col-md-8'> 
     <a id ='message' class = "list-group-item active">List User</a> 
     <div id='viewContent'> 
     </div> 

     <div name='formInput' > 
      <form class='' id='formChat'> 
      <div class="form-group"> 
       <label class="sr-only" for="contentChat">Enter message</label> 
       <input type="text" class="form-control" id="contentChat" placeholder="Enter message" > 
       <input type='submit' class='btn btn-primary ' value ='Send'> 
      </div> 
      </form> 
     </div> 

     </div> <!-- chat box div --> 
    </div> 

    <script type="text/javascript"> 
     jQuery(function($){   
     var socket = io.connect('http://localhost:8080'); 
     var $contentChat = $('#contentChat'), 
      $send =$('formChat'); 
     var emailLogin = ''; 
     var listID = []; 
     var idSocket ; 

     socket.on('listUser', function(data){ 
      console.log(data); 
      console.log(socket.id); 
      for(var i =0 ; i<data.length; i++){ 
      $('#listUser').append('<a href ="#" id="'+data[i].name+'" class="list-group-item" value="'+ 
       data[i].socketId+'">' +data[i].name+ '</a>').click(function(){ 
       showSocketid(data[i].socketId,data[i].name); 
      }); 
      } 
     }); 

     $('a').each(function(){ 
      console.log($(this).attr('id')); 
      /*$(this).click(function(){ 
      });*/ 
     }); 

     function showSocketid(socketID , nameUser){ 
      alert(socketID +'and'+ nameUser); 
     }; 

     }); 
    </script> 

    </body> 
</html>

來源

2015-11-05 05:09:16 TungLoGach

jQuery代碼沒有產生預期的效果

回答

相關問題