2016-08-15 3 views
-3

Когда кнопка нажата, я хотел бы, чтобы для другого тега div отображался на экране пользователь. Я пробовал и просматривал многие веб-страницы, чтобы понять, что происходит не так. На консоли для веб-страницы нет ошибки. Вот код HTML и код JavaScript.JQuery dynamic html page

/*jslint browser: true*/ 
/*global $, jQuery, alert*/ 

$("buttonId").click(function() { 
    var structure = $("<div>Hello world</div>"); 
    $("#newDiv").append(structure); 
    document.getElementById("div01").style.backgroundColor = "red"; 
}); 



<html> 
    <head> 
     <link rel="stylesheet" href="site.css"> 
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    </head> 

    <body> 
     <nav> 
      <p class="logo"> Logo! </p> 
      <ul id="ul01"> 
       <li><a href="#" class="active">NewsFeed</a></li> 
       <li><a href="#">Discover</a></li> 
       <li><a href="#">Following</a></li> 
      </ul> 
      <div class="logIn"> 
       <a href="#"> Login </a> 
       <a href="#"> Sign Up </a> 
      </div> 
     </nav> 
     <a id="buttonId" href="#"> Click fo anouther div!!</a> 
     <div id=newDiv> 
      <div id=div01> Hello </div> 
     </div> 
     <script src="operations.js"></script> 
    </body> 

</html> 
+4

'$ ("# buttonId")' ... –

+3

'$ ("buttonId")' будет не соответствует вашему элементу. Он должен быть '$ (" # buttonId ")' – Steve

+0

Спасибо, он работает сейчас – Jack

ответ

1

$("buttonId") является селектором, который не будет соответствовать какому-либо элементу (как он ищет элемент с тегом buttonId).

Вы должны изменить его на $("#buttonId"), чтобы он работал.

1

В вашем коде были ошибки.

$("buttonId").click(function() { 
    var structure = $("<div>Hello world</div>"); 
    $("#newDiv").append(structure); 
    document.getElementById("div01").style.backgroundColor = "red"; 
}); 

В вышеуказанном коде. # знак отсутствует перед тем кнопкаId. Так что ничего не будет. Это исправленная версия

$("#buttonId").click(function() { 
     var structure = $("<div>Hello world</div>"); 
     $("#newDiv").append(structure); 
     document.getElementById("div01").style.backgroundColor = "red"; 
    }); 

Также в вашем HTML, вы забыли поставить двойные кавычки вне идентификаторы newDiv и div01. Вот исправленная версия

<html> 
    <head> 
     <link rel="stylesheet" href="site.css"> 
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    </head> 

    <body> 
     <nav> 
      <p class="logo"> Logo! </p> 
      <ul id="ul01"> 
       <li><a href="#" class="active">NewsFeed</a></li> 
       <li><a href="#">Discover</a></li> 
       <li><a href="#">Following</a></li> 
      </ul> 
      <div class="logIn"> 
       <a href="#"> Login </a> 
       <a href="#"> Sign Up </a> 
      </div> 
     </nav> 
     <a id="buttonId" href="#"> Click fo anouther div!!</a> 
     <div id="newDiv"> 
      <div id="div01"> Hello </div> 
     </div> 
     <script src="operations.js"></script> 
    </body> 

</html> 
0

Похоже, что вам не хватает знака «#» перед вашим $ («buttonId»).

Так оно и должно быть:?!

$("#buttonId").click(function() { 
     var structure = $("<div>Hello world</div>"); 
     $("#newDiv").append(structure); 
     document.getElementById("div01").style.backgroundColor = "red"; 
    }); 

Приветствия,

Дэвид