Javascript Jquery addClass功能不适用于动态内容_Javascript_Jquery_Firebase_Firebase Realtime Database

Javascript Jquery addClass功能不适用于动态内容

javascript jquery firebase

Javascript Jquery addClass功能不适用于动态内容,javascript,jquery,firebase,firebase-realtime-database,Javascript,Jquery,Firebase,Firebase Realtime Database,更新：我的css页面（标签{）中有一个未闭合的括号。当我删除这个时，它可以工作我正在尝试向使用Jquery选择器动态添加到html页面的p元素添加样式。但是，我无法使其用于动态内容。它适用于简单的for循环（），但不适用于循环从数据库读取返回的数据我的完整html页面： <html> <head> <title>Columbia Ride Share</title> <meta charset="utf-8"/> <

更新：我的css页面（标签{）中有一个未闭合的括号。当我删除这个时，它可以工作

我正在尝试向使用Jquery选择器动态添加到html页面的p元素添加样式。但是，我无法使其用于动态内容。它适用于简单的for循环（），但不适用于循环从数据库读取返回的数据

我的完整html页面：

<html>
<head>
  <title>Columbia Ride Share</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="post-ride.css">
   <script>console.log("hello anyone in here");</script>

  <body>
      <header>
          <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 onclick = "`document.getElementById('id01').style.display='block'"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 comment 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> 

<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>
  // 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);
</script>

<script src="postRides.js" type="text/javascript"></script>
<script>postRides("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>
</body>
</html>

原始代码 javascript:

ref.child(direction + '/' + airport).once("value", function(data) {
             data.forEach(function(snapshot) {
                 $("#ride").append('<p>' + snapshot.val().from + 'to: ' + snapshot.val().to + 'day: ' + snapshot.val().when + '</p>').addClass('style');
             });
});

html:

$（“#骑行”）.append（“text”）；

我刚刚更改了你的代码笔。

$（'#ride'）。追加（'p class=“style”>'+val+'
'））

啊，我明白了。不幸的是，在CSS将

.style p

更改为

p.style

时，我的p元素周围仍然不会显示边框。style在codepen上成功运行-但问题是codepen不涉及动态内容。数据库读取仍然没有样式化（基于本地提供的页面）

$（“#ride”）。append（“'+snapshot.val（）。从+'到：'+snapshot.val（）。到+'天：'+snapshot.val（）。当+'
'）；

它不工作了？如果

append（）

返回一个

jQuery

元素，我建议在纯

html

文本中添加该类，或者对新添加的元素进行选择，以便将类应用于它

ref.child(direction + '/' + airport).once("value", function(data) {
             data.forEach(function(snapshot) {
                 $("#ride").append('<p>' + snapshot.val().from + 'to: ' + snapshot.val().to + 'day: ' + snapshot.val().when + '</p>').addClass('style');
             });
});

.style{
    position: relative;
    padding: .100em;
    margin-left: 10%;
}

.style p{
    background-color: #fefefe;
    margin: 5px auto; /* 15% from the top and centered */
    margin-left: 40%;
    border: 12px solid #888;
    border-color: #c4d8e2;
}

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

$('#ride').append('<p class="style">text</p>');