＆＃34; Uncaught SyntaxError：missing）在参数列表＆＃34;之后vs＆＃34;意想不到的令牌}＆＃34;

时间：2017-03-23 04:14:42

标签： javascript jquery syntax syntax-error

我有动态编写HTML的jquery代码。在争论列表之后，我原先得到了一个＆＃34;我的index.html文件中包含以下代码的错误：

             $("#ride").append('<div class= "style"><img src = "' 
                 + snapshot.val().id 
                 + '" style="width:68px;height:68px;"/><p>' 
                 + snapshot.val().user 
                 + '</p><ul class = "styling"><li>'  
                 + snapshot.val().when 
                 + ' '
                 + snapshot.val().from 
                 + ' - ' 
                 + snapshot.val().to 
                 + '</li><li>' 
                 + snapshot.val().comments 
                 + '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(' 
                 + snapshot.val().user 
                 + ' , '
                 + snapshot.val().reference 
                 + ')">join this ride</button></ul></div>');

在阅读了各种帖子之后，我认为可能是因为我在没有引号的情况下将字符串传递给函数？所以我做了：

             $("#ride").append('<div class= "style"><img src = "' 
                 + snapshot.val().id 
                 + '" style="width:68px;height:68px;"/><p>' 
                 + snapshot.val().user 
                 + '</p><ul class = "styling"><li>'  
                 + snapshot.val().when 
                 + ' '
                 + snapshot.val().from 
                 + ' - ' 
                 + snapshot.val().to 
                 + '</li><li>' 
                 + snapshot.val().comments 
                 + '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger("' 
                 + snapshot.val().user 
                 + '" , "'
                 + snapshot.val().reference 
                 + '")">join this ride</button></ul></div>');
         });

然而，现在我得到了＃34; Uncaught SyntaxError：Unexpected token}＆＃34;。更有趣的是，它似乎每次都用一条（看似）随机线给出这个错误。到目前为止，它声称这些行分别引起了异常

<script src="app.js" type="text/javascript"></script>

<html>

在我的index.html文件中。更奇怪的是，我挣扎的javascript并没有放在这个js文件中。

完整的postRides.js：

function loadRides(direction, airport) {
    var ref = firebase.database().ref();
    ref.on("value", function(snapshot) {
        console.log(snapshot.val());
    }, function(errorObject) {
        console.log("The read failed: " + errorObject.code);
    });
    var x = 0;
    ref.child(direction + '/' + airport).once("value", function(data) {
        data.forEach(function(snapshot) {


            $("#ride").append('<div class= "style"><img src = "' +
                snapshot.val().id +
                '" style="width:68px;height:68px;"/><p>' +
                snapshot.val().user +
                '</p><ul class = "styling"><li>' +
                snapshot.val().when +
                ' ' +
                snapshot.val().from +
                ' - ' +
                snapshot.val().to +
                '</li><li>' +
                snapshot.val().comments +
                '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"' +
                snapshot.val().user +
                '" , "' +
                snapshot.val().reference +
                '\")">join this ride</button></ul></div>');


        });


    });

}

function initMessenger(name, reference) {
    console.log('initMessenger called with this reference: ' + reference);
    if (window.currentUser) {
        console.log('you are signed in');
        document.getElementById('convoHeader').innerHTML = name;
        document.getElementById('messages-card').style.display = "";
        window.friendlyChat = new FriendlyChat(reference);

    } else {
        document.getElementById('id01').style.display = 'block';
        console.log('you are not signed in');
    }

}

的index.html：

<head>
    <title>Columbia Ride Share</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="messenger.css">
    <link rel="stylesheet" type="text/css" href="post-ride.css">

</head>

<body>
    <header>
        <div class="top">
        </div>
        <h1 class="page-title">Columbia Ride Share</h1>
        <nav>
            <ul>
                <li><a href="index.html">home</a></li>
                <li><button class="btn btn-link" onclick="document.getElementById('id02').style.display='block'" style="width:auto;">CREATE A RIDE</button></a>
                </li>
                <div id="id02" class="modal">
                    <form class="modal-content animate" action="action_page.php">
                        <div class="imgcontainer">
                            <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
                        </div>
                        <div class="loginMsg">
                            <p>Where are you headed?
                                <p>
                                    <a href="create-a-ride-to-airport.html">I need a ride to the airport</a>
                                    <a href="create-a-ride-from-airport.html">I need a ride to campus</a>
                        </div>
                    </form>
                </div>
                <li class="login">
                    <button id="quickstart-sign-in" "style="width:auto; ">LOGIN</button></li>
             <div id="id01 " class="modal ">
                 <form class="modal-content animate " action="action_page.php ">
                     <div class="imgcontainer ">
                         <span onclick="document.getElementById( 'id01').style.display='none' " class="close " title="Close Modal ">&times;</span>
                     </div>
                     <div class="loginMsg ">
                         <p>hi there!</p>
                         <p>log in to post and join on columbia ride share</p>
                     </div>
                     <button class="loginBtn loginBtn--facebook ">connect with facebook</button>
                     <button onclick = "googleSignin() " class="loginBtn loginBtn--google ">connect with google</button>
                  </form>
               </div>

           </ul>
     </nav>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js "></script>
<div id= "ride "></div> 


 <div id="messages-card-container " class="mdl-cell mdl-cell--12-col mdl-grid ">

  <!-- Messages container -->
  <div id="messages-card " style="display:none; " class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop ">
    <div class="mdl-card__supporting-text mdl-color-text--grey-600 ">

      <div id="convoHeader ">HEADER</div>
  <div class="wrapBox ">
      <div id="messages ">
        <span id="message-filler "></span>
      </div>
      <form id="message-form " action="# ">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
          <input class="mdl-textfield__input " type="text " id="message " placeholder="Type a message... ">
        </div>
      </form>
      <form id="image-form " action="# ">
        <input id="mediaCapture " type="file " accept="image/*,capture=camera ">
        <button id="submitImage " title="Add an image " class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white ">
        </button>
      </form>
  </div>
    </div>
  </div>

  <div id="must-signin-snackbar " class="mdl-js-snackbar mdl-snackbar ">
    <div class="mdl-snackbar__text "></div>
    <button class="mdl-snackbar__action " type="button "></button>
  </div>

</div>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase.js "></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-app.js "></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-auth.js "></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-database.js "></script>
<script src="https://www.gstatic.com/firebasejs/3.7.1/firebase-messaging.js "></script>
<script src="https://www.gstatic.com/firebasejs/3.7.1/firebase-storage.js "></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAIY9XOb5QVDTxJKxtvSZRiyqgpGasHF3M ",
    authDomain: "columbia-ride-share.firebaseapp.com ",
    databaseURL: "https://columbia-ride-share.firebaseio.com ",
    storageBucket: "columbia-ride-share.appspot.com ",
    messagingSenderId: "1058399238109 "
  };
  firebase.initializeApp(config);
  this.auth = firebase.auth();
  this.database = firebase.database();
  this.storage = firebase.storage();
  this.messaging = firebase.messaging();
</script>

<script src="messenger.js " type="text/javascript "></script>
<script src="postRides.js " type="text/javascript "></script>
<script>loadRides("TOairport ", "JFK ");</script>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none ";
    }
}
</script>

<script>
var modal = document.getElementById('id02');

window.onclick= function(event){

    if(event.target == modal) {
        modal.style.display = "none ";
    }
}
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js " integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin=" anonymous "></script>
<script src="app.js " type="text/javascript "></script>

<script>
    window.onload = function() {
      initApp();
    };
</script>

<script>
    $('#convoHeader').click(function(){
    if($('.wrapBox').is(":visible ")){
        $('.wrapBox').hide();
    $('#messages-card-container').addClass('hide_wrapBox');
    console.log('you get here');
    }else{
        $('.wrapBox').show();
    $('#messages-card-container').removeClass('hide_wrapBox');
    }
});
</script>

3 个答案:

答案 0 :(得分：0)

语法问题。试试这个：

 $("#ride").append('<div class= "style"><img src = "' 
                 + snapshot.val().id 
                 + '" style="width:68px;height:68px;"/><p>' 
                 + snapshot.val().user 
                 + '</p><ul class = "styling"><li>'  
                 + snapshot.val().when 
                 + ' '
                 + snapshot.val().from 
                 + ' - ' 
                 + snapshot.val().to 
                 + '</li><li>' 
                 + snapshot.val().comments 
                 + '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"' 
                 + snapshot.val().user 
                 + '" , "'
                 + snapshot.val().reference 
                 + '\")">join this ride</button></ul></div>');

答案 1 :(得分：0)

如果您将字符串拆分为多行，则需要使用＆＃39; /＆＃39;然后在每一行

  $("#ride").append('<div class= "style"><img src = "' /
             + snapshot.val().id /
             + '" style="width:68px;height:68px;"/><p>' /
             + snapshot.val().user /
             + '</p><ul class = "styling"><li>'  /
             + snapshot.val().when /
             + ' '/
             + snapshot.val().from /
             + ' - ' /
             + snapshot.val().to /
             + '</li><li>' /
             + snapshot.val().comments /
             + '</li><button type="button" class="btn btn-outline-info" onclick = "initMessenger(\"' /
             + snapshot.val().user /
             + '" , "'/
             + snapshot.val().reference /
             + '\")">join this ride</button></ul></div>');

答案 2 :(得分：0)

这是一个语法错误（或者可能是一个逃避噩梦）。这是答案：

$("#ride").append(`
<div class="style">
    <img src="${snapshot.val().id}" style="width:68px;height:68px;"/>
    <p>${snapshot.val().user}</p>
    <ul class="styling">
    <li>${snapshot.val().when} ${snapshot.val().from} - ${snapshot.val().to}</li>
    <li>snapshot.val().comments</li>
    <button type="button" class="btn btn-outline-info" onclick="initMessenger('${snapshot.val().user}','${snapshot.val().reference}')">join this ride</button>
    </ul>
</div>`);
相关问题
最新问题