jQuery没有在玉器上工作。 Documnet.ready功能不起作用

时间：2016-06-27 12:16:23

标签： javascript jquery node.js pug

尝试了不同的意图，但jQuery部分仍然无效。 PS ： jQuery lib已包含此文档已扩展。 

extends home
mixin print(x,y)
 if x < y
  .column=x
 else
  .column

mixin rooms(n,num,a,b,c,d)
 while n < num
  .row(value=n++)
  +print(n,a)
  +print(n,b)
  +print(n,c)
  +print(n,d)

block content

  div(id="tabs")
  .row
   .column
    a(href="#tab1" onclick="open(this.href)") Ground Floor
   .column
    a(href="#tab2" onclick="open(this.href)") Ist Floor
   .column
    a(href="#tab3" onclick="open(this.href)") IInd Floor

  div(id="tab1")
   +rooms(100,111,111,104,111,111) 
  div(id="tab2") 
   +rooms(200,217,217,211,214,211)
  div(id="tab3")
   +rooms(300,317,317,311,314,311)

script(src='https://code.jquery.com/jquery-2.1.1.min.js')
script.
 $(document).ready(function(){
  $('#tab1').hide();
  $('#tab2').hide();
  $('#tab3').hide();   
 });

1. jQuery没有隐藏要求隐藏的div

2.控制台中出现.NO错误。

3 个答案:

答案 0 :(得分：0)

  

生成的html是预期的

我将Jade复制到this online converter。

输出的结尾如下所示：

<script>
  $(document).ready(function(){
   $('#tab1').hide();
   $('#tab2').hide();
   $('#tab3').hide();   
</script>});

您错过了});之前的缩进，因此它被放置在外部脚本元素中。

  

控制台中没有错误

这产生了错误：

Uncaught SyntaxError: Unexpected end of input

当我纠正该错误时，它成功隐藏了元素：

＆＃13;
＆＃13; 
<div id="tabs"></div>
<div class="row">
  <div class="column"><a href="#tab1" onclick="open(this.href)">Ground Floor</a></div>
  <div class="column"><a href="#tab2" onclick="open(this.href)">Ist Floor</a></div>
  <div class="column"><a href="#tab3" onclick="open(this.href)">IInd Floor</a></div>
</div>
<div id="tab1">
  <div value="100" class="row"></div>
  <div class="column">101</div>
  <div class="column">101</div>
  <div class="column">101</div>
  <div class="column">101</div>
  <div value="101" class="row"></div>
  <div class="column">102</div>
  <div class="column">102</div>
  <div class="column">102</div>
  <div class="column">102</div>
  <div value="102" class="row"></div>
  <div class="column">103</div>
  <div class="column">103</div>
  <div class="column">103</div>
  <div class="column">103</div>
  <div value="103" class="row"></div>
  <div class="column">104</div>
  <div class="column"></div>
  <div class="column">104</div>
  <div class="column">104</div>
  <div value="104" class="row"></div>
  <div class="column">105</div>
  <div class="column"></div>
  <div class="column">105</div>
  <div class="column">105</div>
  <div value="105" class="row"></div>
  <div class="column">106</div>
  <div class="column"></div>
  <div class="column">106</div>
  <div class="column">106</div>
  <div value="106" class="row"></div>
  <div class="column">107</div>
  <div class="column"></div>
  <div class="column">107</div>
  <div class="column">107</div>
  <div value="107" class="row"></div>
  <div class="column">108</div>
  <div class="column"></div>
  <div class="column">108</div>
  <div class="column">108</div>
  <div value="108" class="row"></div>
  <div class="column">109</div>
  <div class="column"></div>
  <div class="column">109</div>
  <div class="column">109</div>
  <div value="109" class="row"></div>
  <div class="column">110</div>
  <div class="column"></div>
  <div class="column">110</div>
  <div class="column">110</div>
  <div value="110" class="row"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
<div id="tab2"> 
  <div value="200" class="row"></div>
  <div class="column">201</div>
  <div class="column">201</div>
  <div class="column">201</div>
  <div class="column">201</div>
  <div value="201" class="row"></div>
  <div class="column">202</div>
  <div class="column">202</div>
  <div class="column">202</div>
  <div class="column">202</div>
  <div value="202" class="row"></div>
  <div class="column">203</div>
  <div class="column">203</div>
  <div class="column">203</div>
  <div class="column">203</div>
  <div value="203" class="row"></div>
  <div class="column">204</div>
  <div class="column">204</div>
  <div class="column">204</div>
  <div class="column">204</div>
  <div value="204" class="row"></div>
  <div class="column">205</div>
  <div class="column">205</div>
  <div class="column">205</div>
  <div class="column">205</div>
  <div value="205" class="row"></div>
  <div class="column">206</div>
  <div class="column">206</div>
  <div class="column">206</div>
  <div class="column">206</div>
  <div value="206" class="row"></div>
  <div class="column">207</div>
  <div class="column">207</div>
  <div class="column">207</div>
  <div class="column">207</div>
  <div value="207" class="row"></div>
  <div class="column">208</div>
  <div class="column">208</div>
  <div class="column">208</div>
  <div class="column">208</div>
  <div value="208" class="row"></div>
  <div class="column">209</div>
  <div class="column">209</div>
  <div class="column">209</div>
  <div class="column">209</div>
  <div value="209" class="row"></div>
  <div class="column">210</div>
  <div class="column">210</div>
  <div class="column">210</div>
  <div class="column">210</div>
  <div value="210" class="row"></div>
  <div class="column">211</div>
  <div class="column"></div>
  <div class="column">211</div>
  <div class="column"></div>
  <div value="211" class="row"></div>
  <div class="column">212</div>
  <div class="column"></div>
  <div class="column">212</div>
  <div class="column"></div>
  <div value="212" class="row"></div>
  <div class="column">213</div>
  <div class="column"></div>
  <div class="column">213</div>
  <div class="column"></div>
  <div value="213" class="row"></div>
  <div class="column">214</div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div value="214" class="row"></div>
  <div class="column">215</div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div value="215" class="row"></div>
  <div class="column">216</div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div value="216" class="row"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
<div id="tab3">
  <div value="300" class="row"></div>
  <div class="column">301</div>
  <div class="column">301</div>
  <div class="column">301</div>
  <div class="column">301</div>
  <div value="301" class="row"></div>
  <div class="column">302</div>
  <div class="column">302</div>
  <div class="column">302</div>
  <div class="column">302</div>
  <div value="302" class="row"></div>
  <div class="column">303</div>
  <div class="column">303</div>
  <div class="column">303</div>
  <div class="column">303</div>
  <div value="303" class="row"></div>
  <div class="column">304</div>
  <div class="column">304</div>
  <div class="column">304</div>
  <div class="column">304</div>
  <div value="304" class="row"></div>
  <div class="column">305</div>
  <div class="column">305</div>
  <div class="column">305</div>
  <div class="column">305</div>
  <div value="305" class="row"></div>
  <div class="column">306</div>
  <div class="column">306</div>
  <div class="column">306</div>
  <div class="column">306</div>
  <div value="306" class="row"></div>
  <div class="column">307</div>
  <div class="column">307</div>
  <div class="column">307</div>
  <div class="column">307</div>
  <div value="307" class="row"></div>
  <div class="column">308</div>
  <div class="column">308</div>
  <div class="column">308</div>
  <div class="column">308</div>
  <div value="308" class="row"></div>
  <div class="column">309</div>
  <div class="column">309</div>
  <div class="column">309</div>
  <div class="column">309</div>
  <div value="309" class="row"></div>
  <div class="column">310</div>
  <div class="column">310</div>
  <div class="column">310</div>
  <div class="column">310</div>
  <div value="310" class="row"></div>
  <div class="column">311</div>
  <div class="column"></div>
  <div class="column">311</div>
  <div class="column"></div>
  <div value="311" class="row"></div>
  <div class="column">312</div>
  <div class="column"></div>
  <div class="column">312</div>
  <div class="column"></div>
  <div value="312" class="row"></div>
  <div class="column">313</div>
  <div class="column"></div>
  <div class="column">313</div>
  <div class="column"></div>
  <div value="313" class="row"></div>
  <div class="column">314</div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div value="314" class="row"></div>
  <div class="column">315</div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div value="315" class="row"></div>
  <div class="column">316</div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div value="316" class="row"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
  $(document).ready(function(){
   $('#tab1').hide();
   $('#tab2').hide();
   $('#tab3').hide();   
});
</script>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

好的，最后当你有一个扩展的文件时，你将js代码保存在父文件中，因为保留在扩展文档的末尾会导致它被某个标记继承。

答案 2 :(得分：-1)

尝试用ids编写＃

div(id="tabs")
  .row
   .column
    a(href="#tab1" onclick="open(this.href)") Ground Floor
   .column
    a(href="#tab2" onclick="open(this.href)") Ist Floor
   .column
    a(href="#tab3" onclick="open(this.href)") IInd Floor

  #tab1 rooms(100,111,111,104,111,111) 
  #tab2 rooms(200,217,217,211,214,211)
  #tab3 rooms(300,317,317,311,314,311)
相关问题
最新问题