2014-06-11 1 views
0

http://www.collegeinsideview.com/에있는 "대학 정보/자세히보기"그림 아래의 노란색 섹션을 참조하십시오.왜이 3 개의 링크가 작동하지 않습니까?

상위 3 개의 링크는 작동하지 않지만 (Columbia, Princeton 및 Brown의 경우) 나머지는 수행합니다. Uncaught Error: Syntax error, unrecognized expression: /columbia/academics/professors/1라고하는 JS 오류가 나타납니다. 왜 이런거야?

UPDATE

$('#left > li > a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}); 

에 무엇에서 JS를 변경 한 후 더 이상 문제를하지 않습니다.

HTML

<%= link_to "Get Paid to Answer Questions", "/the-deal", id: "the_deal", class: "btn btn-link" %> 
<h1 id="heading">In-Depth Reviews of Colleges</h1> 
<div class="tabbable"> 
    <div class="tab-content"> 
     <div class="tab-pane fade active in" id="columbia"> 
      <%= image_tag "columbia1.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "columbia2.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "columbia3.jpg", size: "297x187", class: 'picture' %> 
      <%= link_to "&bull; &bull; Read more about Columbia &bull; &bull;".html_safe, "/columbia/academics/professors/1", class: 'school_link' %> 
      <div class="right"> 
       <p class="question" class="well"><strong>How does the workload impact your social life?</strong></p> 
       <%= image_tag "columbia_social_atmosphere_7.png", class: 'answers' %> 
       <%= link_to '--read more--', '/columbia/social-life/social-atmosphere/7', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="princeton"> 
      <%= image_tag "princeton1.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "princeton2.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "princeton3.jpg", size: "297x187", class: 'picture' %> 
      <%= link_to "&bull; &bull; Read more about Princeton &bull; &bull;".html_safe, "/princeton/academics/professors/1", class: 'school_link' %> 
      <div class="right"> 
       <p class="question" class="well"><strong>How would you make your classes better?</strong></p> 
       <%= image_tag "princeton_classes_6.png", class: 'answers' %> 
       <%= link_to '--read more--', '/princeton/academics/classes/6', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="brown"> 
      <%= image_tag "brown1.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "brown2.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "brown3.jpg", size: "297x187", class: 'picture' %> 
      <%= link_to "&bull; &bull; Read more about Brown &bull; &bull;".html_safe, "/brown/academics/professors/1", class: 'school_link' %> 
      <div class="right"> 
       <p class="question" class="well"><strong>Are people intellectual? Do they have thoughtful conversations with each other?</strong></p> 
       <%= image_tag "brown_social_atmosphere_5.png", class: 'answers' %> 
       <%= link_to '--read more--', '/brown/social-life/social-atmosphere/5', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="penn"> 
      <div class="left_pane"> 
       <%= image_tag "university-of-pennsylvania1.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "university-of-pennsylvania2.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "university-of-pennsylvania3.jpg", size: "297x187", class: 'picture' %> 
       <%= link_to "&bull; &bull; Read more about Penn &bull; &bull;".html_safe, "/university-of-pennsylvania/academics/professors/1", class: 'school_link' %> 
      </div> 
      <div class="right"> 
       <p class="question" class="well"><strong>Are your classes too hard, or too easy? Why?</strong></p> 
       <%= image_tag "penn_dificulty_4.png", class: 'answers' %> 
       <%= link_to '--read more--', '/university-of-pennsylvania/academics/difficulty/4', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="yale"> 
      <div class="left_pane"> 
       <%= image_tag "yale1.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "yale2.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "yale3.jpg", size: "297x187", class: 'picture' %> 
       <%= link_to "&bull; &bull; Read more about Yale &bull; &bull;".html_safe, "/yale/academics/professors/1", class: 'school_link' %> 
      </div> 
      <div class="right"> 
       <p class="question" class="well"><strong>Is it easy to make friends? How did you make friends?</strong></p> 
       <%= image_tag "yale_social_atmosphere_1.png", class: 'answers' %> 
       <%= link_to '--read more--', '/yale/social-life/social-atmosphere/1', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="cornell"> 
      <div class="left_pane"> 
       <%= image_tag "cornell1.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "cornell2.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "cornell3.jpg", size: "297x187", class: 'picture' %> 
       <%= link_to "&bull; &bull; Read more about Cornell &bull; &bull;".html_safe, "/cornell/academics/professors/1", class: 'school_link' %> 
      </div> 
      <div class="right"> 
       <p class="question" class="well"><strong>Mary Donlon Hall</strong></p> 
       <%= image_tag "cornell_housing_mary_donlon_hall.png", class: 'answers' %> 
       <%= link_to '--read more--', '/cornell/living-environment/housing/mary-donlon-hall', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="harvard"> 
      <div class="left_pane"> 
       <%= image_tag "harvard1.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "harvard2.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "harvard3.jpg", size: "297x187", class: 'picture' %> 
       <%= link_to "&bull; &bull; Read more about Harvard &bull; &bull;".html_safe, "/harvard/academics/professors/1", class: 'school_link' %> 
      </div> 
      <div class="right"> 
       <p class="question" class="well"><strong>Are there comfortable places to study?</strong></p> 
       <%= image_tag "harvard_campus_2.png", class: 'answers' %> 
       <%= link_to '--read more--', '/harvard/academics/classes/5', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="dartmouth"> 
      <div class="left_pane"> 
       <%= image_tag "dartmouth1.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "dartmouth2.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "dartmouth3.jpg", size: "297x187", class: 'picture' %> 
       <%= link_to "&bull; &bull; Read more about Dartmouth &bull; &bull;".html_safe, "/dartmouth/academics/professors/1", class: 'school_link' %> 
      </div> 
      <div class="right"> 
       <p class="question" class="well"><strong>Do professors make things easy to understand?</strong></p> 
       <%= image_tag "dartmouth_professors_1.png", class: 'answers' %> 
       <%= link_to '--read more--', '/dartmouth/academics/professors/1', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="pitt"> 
      <div class="left_pane"> 
       <%= image_tag "university-of-pittsburgh1.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "university-of-pittsburgh2.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "university-of-pittsburgh3.jpg", size: "297x187", class: 'picture' %> 
       <%= link_to "&bull; &bull; Read more about Pitt &bull; &bull;".html_safe, "/university-of-pittsburgh/academics/professors/1", class: 'school_link' %> 
      </div> 
      <div class="right"> 
       <p class="question" class="well"><strong>Neuroscience: What are people in the major like? How would you stereotype them?</strong></p> 
       <%= image_tag "pitt_neuroscience_8.png", class: 'answers' %> 
       <%= link_to '--read more--', '/university-of-pittsburgh/academics/majors/neuroscience/8', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="wisconsin"> 
      <div class="left_pane"> 
       <%= image_tag "university-of-wisconsin1.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "university-of-wisconsin2.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "university-of-wisconsin3.jpg", size: "297x187", class: 'picture' %> 
       <%= link_to "&bull; &bull; Read more about Wisconsin &bull; &bull;".html_safe, "/university-of-wisconsin/academics/professors/1", class: 'school_link' %> 
      </div> 
      <div class="right"> 
       <p class="question" class="well"><strong>How much will not partying limit your social life?</strong></p> 
       <%= image_tag "wisconsin_parties_3.png", class: 'answers' %> 
       <%= link_to '--read more--', '/university-of-wisconsin/social-life/parties/3', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="colgate"> 
      <div class="left_pane"> 
       <%= image_tag "colgate1.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "colgate2.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "colgate3.jpg", size: "297x187", class: 'picture' %> 
       <%= link_to "&bull; &bull; Read more about Colgate &bull; &bull;".html_safe, "/colgate/academics/professors/1", class: 'school_link' %> 
      </div> 
      <div class="right"> 
       <p class="question" class="well"><strong>Who wouldn't fit in?</strong></p> 
       <%= image_tag "colgate_social_atmosphere_2.png", class: 'answers' %> 
       <%= link_to '--read more--', '/colgate/social-life/social-atmosphere/2', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="adelphi"> 
      <div class="left_pane"> 
       <%= image_tag "adelphi-university1.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "adelphi-university2.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "adelphi-university3.jpg", size: "297x187", class: 'picture' %> 
       <%= link_to "&bull; &bull; Read more about Adelphi &bull; &bull;".html_safe, "/adelphi-university/academics/professors/1", class: 'school_link' %> 
      </div> 
      <div class="right"> 
       <p class="question" class="well"><strong>How's the on-campus food (taste, price, health, convenience, hours, variety...)?</strong></p> 
       <%= image_tag "adelphi_food_1.png", class: 'answers' %> 
       <%= link_to '--read more--', '/adelphi-university/living-environment/food/1', class: 'read_more' %> 
      </div> 
     </div> 
    </div> 
    <ul id="left" class="nav nav-pills nav-stacked"> 
     <li id="columbia" class="active"><a href="#columbia">Columbia</a></li> 
     <li id="princeton"><a href="#princeton">Princeton</a></li> 
     <li id="brown"><a href="#brown">Brown</a></li> 
     <li id="penn"><a href="#penn">Penn</a></li> 

     <li id="yale"><a href="#yale">Yale</a></li> 
     <li id="cornell"><a href="#cornell">Cornell</a></li> 
     <li id="harvard"><a href="#harvard">Harvard</a></li> 
     <li id="dartmouth"><a href="#dartmouth">Dartmouth</a></li> 

     <li id="pitt"><a href="#pitt">Pitt</a></li> 
     <li id="wisconsin"><a href="#wisconsin">Wisconsin</a></li> 
     <li id="colgate"><a href="#colgate">Colgate</a></li> 
     <li id="adelphi"><a href="#adelphi">Adelphi</a></li> 
    </ul> 
</div> 

<div id="notify"> 
    <p>Right now I only have reviews for those 12 schools. Enter your email below to be notified when there's more!</p> 
    <span id="notify_span"> 
     <%= simple_form_for :subscribe, url: 'subscribe' do |f| %> 
      <%= f.input :email, placeholder: '[email protected]', label: false, required: true %> <br/> 
      <%= f.button :submit, "1-Click Sign Up", class: "btn btn-primary", data: { :disable_with => "Submitting..." } %> 
     <% end %> 
    </span>  
</div> 

<ul id="bottom_links"> 
    <li><%= link_to "I Graduated High School. Now What?", "/i-graduated-high-school-now-what" %></li> 
    <li><%= link_to "How to Choose a College", "/how-to-choose-a-college" %></li> 
    <li><%= link_to "How College Inside View Got Started", "https://medium.com/what-i-learned-building/322e8668ed6f" %></li> 
</ul> 

JS

$('#columbia > a, #princeton > a, #brown > a, #penn > a, #harvard > a, #yale > a, #cornell > a, #dartmouth > a, #pitt > a, #wisconsin > a, #colgate > a, #adelphi > a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}) 

CSS

@import "bootstrap"; 
@import "animations"; 

#home_css { 
    max-height: 1200px !important; 
    #the_deal { 
     float: right; 
     font-size: 12px; 
    } 
    #heading { 
     font-size: 42px; 
     clear: right; 
     margin-bottom: 15px; 
    } 
    .tab-content { 
     overflow: hidden; 
     .tab-pane { 
      .picture { 
       margin: 0px; 
      } 
      .school_link { 
       display: block; 
       text-align: center; 
       background-color: beige; 
       margin-top: -5px; 
       padding: 3px 0px; 
       margin-bottom: 20px; 
      } 
      .right { 
       float: right; 
       clear: both; 
       width: 490px; 
       height: 590px; 
       .question { 
        position: relative; 
        left: 15px; 
       } 
       .answers{ 
       } 
       .read_more { 
        display: block; 
        position: relative; 
        left: 15px; 
        top: 10px; 
       } 
      } 
     } 
    } 
    #left { 
     float: left; 
     clear: left; 
     width: 380px; 
     padding-left: 0px; 
     position: relative; 
     bottom: 590px; 
     height: 590px; 
    } 
    #notify, #bottom_links { 
     position: relative; 
     bottom: 575px; 
    } 
    #notify { 
     clear: both; 
     background-color: aliceblue; 
     text-align: center; 
     padding: 30px 0px; 
     border-top: 2px solid lightgray; 
     border-bottom: 2px solid lightgray; 
     p { 
      font-family: 'Arvo', serif; 
     } 
     #notify_span { 
      display: block; 
      margin-top: 25px; 
      form { 
       height: 44px; 
      } 
      input[type=email] { 
       width: 400px; 
       height: 35px; 
       font-family: monospace; 
       font-size: 20px; 
       position: relative; 
       right: 85px; 
      } 
      .btn-primary { 
       height: 43px; 
       width: 137px; 
       position: relative; 
       bottom: 85px; 
       left: 215px; 
       font-size: 16px; 
      } 
     } 
    } 
    #bottom_links { 
     list-style-type: none; 
     text-align: center; 
     margin-top: 10px; 
     margin-bottom: -1000px; 
     li { 
      display: inline; 
      margin-right: 60px; 
      font-size: 12px; 
     } 
    } 
} 
+4

그들은 모두 나를 위해 작동 –

+1

왜 공통 클래스 대신 JS에서 ID를 지정합니까? – coreyward

+1

내 생각에 귀하의 코드는 URL로 코드를 해석하고 있습니다 (예 : RegExp와 유사). 그러나 구문 오류가 아닙니다. 당신은 unminified 코드를 게시 할 수 있습니까? – Halcyon

답변

2

당신의 세계에 법과 사이에 HTML의 구조 임금 및 일하는 divs는 다르다.

 <div class="tab-pane fade active in" id="columbia"> 
      <%= image_tag "columbia1.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "columbia2.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "columbia3.jpg", size: "297x187", class: 'picture' %> 
      <%= link_to "&bull; &bull; Read more about Columbia &bull; &bull;".html_safe, "/columbia/academics/professors/1", class: 'school_link' %> 
      <div class="right"> 
       <p class="question" class="well"><strong>How does the workload impact your social life?</strong></p> 
       <%= image_tag "columbia_social_atmosphere_7.png", class: 'answers' %> 
       <%= link_to '--read more--', '/columbia/social-life/social-atmosphere/7', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="princeton"> 
      <%= image_tag "princeton1.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "princeton2.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "princeton3.jpg", size: "297x187", class: 'picture' %> 
      <%= link_to "&bull; &bull; Read more about Princeton &bull; &bull;".html_safe, "/princeton/academics/professors/1", class: 'school_link' %> 
      <div class="right"> 
       <p class="question" class="well"><strong>How would you make your classes better?</strong></p> 
       <%= image_tag "princeton_classes_6.png", class: 'answers' %> 
       <%= link_to '--read more--', '/princeton/academics/classes/6', class: 'read_more' %> 
      </div> 
     </div> 
     <div class="tab-pane fade" id="brown"> 
      <%= image_tag "brown1.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "brown2.jpg", size: "297x187", class: 'picture' %> 
      <%= image_tag "brown3.jpg", size: "297x187", class: 'picture' %> 
      <%= link_to "&bull; &bull; Read more about Brown &bull; &bull;".html_safe, "/brown/academics/professors/1", class: 'school_link' %> 
      <div class="right"> 
       <p class="question" class="well"><strong>Are people intellectual? Do they have thoughtful conversations with each other?</strong></p> 
       <%= image_tag "brown_social_atmosphere_5.png", class: 'answers' %> 
       <%= link_to '--read more--', '/brown/social-life/social-atmosphere/5', class: 'read_more' %> 
      </div> 
     </div> 

위의 코드는 작동하지 않는 코드입니다. 다음은 처음입니다.

 <div class="tab-pane fade" id="penn"> 
      <div class="left_pane"> 
       <%= image_tag "university-of-pennsylvania1.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "university-of-pennsylvania2.jpg", size: "297x187", class: 'picture' %> 
       <%= image_tag "university-of-pennsylvania3.jpg", size: "297x187", class: 'picture' %> 
       <%= link_to "&bull; &bull; Read more about Penn &bull; &bull;".html_safe, "/university-of-pennsylvania/academics/professors/1", class: 'school_link' %> 
      </div> 
      <div class="right"> 
       <p class="question" class="well"><strong>Are your classes too hard, or too easy? Why?</strong></p> 
       <%= image_tag "penn_dificulty_4.png", class: 'answers' %> 
       <%= link_to '--read more--', '/university-of-pennsylvania/academics/difficulty/4', class: 'read_more' %> 
      </div> 
     </div> 

둘 사이의 빠른 비교가되지 않는 부분이

<div id="columbia"> 
    <a>relevant link</a> 
    <div class="right" > 
    </div> 
</div> 
같은 구조하는 동안 작업을 수행 대학의 구조가이

<div id="columbia"> 
    <div class="left_pane" > 
    <a>relevant link</a> 
    </div> 
    <div class="right" > 
    </div> 
</div> 

같다고 하더군요

구조상의 이러한 차이점은 페이지의 일부 자바 스크립트 선택기가 엉망인 것으로 보입니다. 귀하가 게시 한 코드에서이 구조 차이에 의해 엉망이 될 것이라고 나는 아무것도 보지 못합니다. 그러나 우연이라고 생각하지 않습니다.

ids 대신 클래스를 사용하도록 구조를 변경하더라도 (제 의견으로는 좋은 선택입니다.) 나중에 다른 문제를 야기 할 수 있기 때문에,이 구조의 차이에 대해 정확히 무슨 일이 일어나고 있는지 파악하는 것이 좋습니다.

+0

나는 imgs와 앵커 태그가 .left_pane div 내부에 있도록하기 위해 콜럼비아의 구조를 변경하면 그 앵커가 예상대로 동작하게된다는 것을 확인할 수 있습니다 ... – user3334690

+0

도 도움이되었으므로, 당신의 탭 -panes는 CSS 전용 구현을위한 좋은 선택 일 수 있습니다. 자바 스크립트를 제거하면 .tab-pane : not (: target)은 모든 것을 제외하고 유효한 CSS 선택기가 될 것이라고 생각합니다. 현재 선택된 탭 ... – user3334690

+0

아, 나는 그것을 놓친 것을 믿을 수 없다! 감사. –

관련 문제