Класс переключения неполадок в jQuery

Я (по-видимому) новичок в jQuery, или что-то вроде сценариев, и с небольшим количеством тестов я сделал небольшое изменение размера, которое провело то, что я хотел принять в дизайн. Когда я попытался взять ту же идею в более сложный документ, у меня проблемы.Класс переключения неполадок в jQuery

Вот оригинальный тест я сделал:

http://codepen.io/chris86/pen/avvWwJ

Обратите внимание, как при нажатии на белый немного на вершине она переключает на изменение размера окна дел.

Теперь, я попытался сделать то же самое в следующем примере, но с использованием слова «читать далее» в качестве триггера:

http://codepen.io/chris86/pen/RWrgKv

Вот код:

$(function() { 
 
     $('#moreText').click(function(){ 
 
      $(".header-strip-small").switchClass("header-strip-small","header-strip-big",'normal'); 
 
      $(".header-strip-big").switchClass("header-strip-big","header-strip-small",'normal'); 
 
      return false; 
 
     }); 
 
    });

/*---------- Basic Elements Start ----------*/ 
 

 
h1 { 
 
    font-family: 'Slabo 13px', serif; 
 
    font-size: 1.375em; 
 
    font-weight: 900; 
 
    color: #000000; 
 
} 
 

 
h2 { 
 
    font-family: 'Slabo 13px', serif; 
 
    font-size: 1.125em; 
 
    font-weight: 900; 
 
    color: #000000; 
 
} 
 

 
p { 
 
    font-family: 'Slabo 13px', serif; 
 
    font-size: 1.000em; 
 
    font-weight: normal; 
 
    color: #4d4d4d; 
 
} 
 

 
a { 
 
    color: #000000; 
 
    font-family: 'Open Sans', 'sans-serif'; 
 
    font-size: 1.000em; 
 
    font-weight: normal; 
 
} 
 

 
body { 
 
    width: 100%; 
 
    background-color: #efefef; 
 
    margin: 0 auto; 
 
    height: 1200px; 
 
} 
 

 
/*---------- Basic Elements End ----------*/ 
 

 
/*---------- Header Elements Start ----------*/ 
 

 

 
.heading-strip-small { 
 
    width: 100%; 
 
    background-color: #ffffff; 
 
    border-style: dashed; 
 
    border-width: 0px 0px 1px 0px; 
 
    height: 18.125em; 
 
    margin-bottom: 0px; 
 
} 
 

 

 
.heading-strip-big { 
 
    width: 100%; 
 
    background-color: #ffffff; 
 
    border-style: dashed; 
 
    border-width: 0px 0px 1px 0px; 
 
    height: 22em; 
 
    margin-bottom: 0px; 
 
} 
 

 

 
#heading-content { 
 
    margin: 0 auto; 
 
    width: 960px; 
 
    clear: left; 
 
} 
 

 
#heading-text { 
 
    float:left; 
 
    clear:left; 
 
    width:50%; 
 
    margin-top: 6.250em; 
 
} 
 

 
#begin-about { 
 
    width: 100%; 
 
} 
 

 
#social-bulbs { 
 
    float: right; 
 
    clear: right; 
 
    margin: 0 auto; 
 
} 
 

 
.bulb { 
 
    height: 6.250em; 
 
    float:right; 
 
    text-align:center; 
 
} 
 

 
.glass { 
 
    margin: 0 auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: white; 
 
    border: 1px solid #333333; 
 
    border-radius: 25px; 
 
    margin-top: 6.250em; 
 
    border-bottom: 2px solid #333333; 
 
} 
 

 
.wire { 
 
    height: 100%; 
 
    width: 2px; 
 
    background-color: #000000; 
 
    float: right; 
 
    margin-left: 30px; 
 
    margin-right: 30px; 
 
} 
 

 
.fa { 
 
    margin-top:18px; 
 
} 
 

 

 
/*---------- Header Elements End ----------*/ 
 

 
#nav-options{ 
 
    margin: 0 auto; 
 
    width: 960px; 
 
    height: 100%; 
 
    clear: both; 
 
} 
 

 
#nav-text { 
 
    width:50%; 
 
    margin-top:3.125em; 
 
    margin-bottom:1.563em; 
 
} 
 

 

 

 

 

 

 

 
/*---------- Buttons Start ----------*/ 
 

 

 
.btn { 
 
    display: inline block; 
 
    border-style: solid; 
 
    border-width: 0.063em 0.063em 0.125em 0.063em; 
 
    border-color: #333333; 
 
} 
 

 
.primary { 
 
    background-color: #ffffff; 
 
    border-radius: 0.350em; 
 
    font-family: 'Open Sans', 'sans-serif'; 
 
    padding: 0.563em 1.250em 0.625em 1.250em; 
 
    font-size: 1.125em; 
 
    font-weight: 800; 
 
    text-decoration: none; 
 
    margin: 0em 1.250em 0em 0em; 
 
    color: #333333; 
 
    vertical-align: top; 
 
    max-height: 2.5em; 
 
} 
 

 
.primary:hover { 
 
    transition: background-color 0.2s ease; 
 
    background-color: #f2f2f2; 
 
} 
 

 
.primary:active { 
 
    transform: translate(0.000em, 0.063em); 
 
    -webkit-transform: translate(0.000em, 0.063em); 
 
    border-style: solid; 
 
    border-width: 0.125em 0.063em 0.063em 0.063em; 
 
} 
 

 
.secondary { 
 
    background-color: #f2f2f2; 
 
    border-radius: 0.350em; 
 
    font-family: 'Open Sans', 'sans-serif'; 
 
    padding: 0.563em 1.250em 0.625em 1.250em; 
 
    font-size: 1.125em; 
 
    font-weight: 800; 
 
    text-decoration: none; 
 
    margin: 0em 1.250em 0em 0em; 
 
    color: #333333; 
 
    vertical-align: top; 
 
    max-height: 2.5em; 
 
} 
 

 
.secondary:hover { 
 
    transition: background-color 0.2s ease; 
 
    background-color: #E6E6E6; 
 
} 
 

 
.secondary:active { 
 
    transform: translate(0.000em, 0.063em); 
 
    -webkit-transform: translate(0.000em, 0.063em); 
 
    border-style: solid; 
 
    border-width: 0.125em 0.063em 0.063em 0.063em; 
 
} 
 

 
.circular-btn { 
 
    background-color: #ffffff; 
 
} 
 

 
.circular-btn:hover { 
 
    transition: background-color 0.2s ease; 
 
    background-color: #f2f2f2; 
 
} 
 

 
.circular-btn:active { 
 
    transform: translate(0.000em, 0.063em); 
 
    -webkit-transform: translate(0.000em, 0.063em); 
 
    border-style: solid; 
 
    border-width: 0.125em 0.063em 0.063em 0.063em; 
 
} 
 

 
/*---------- Buttons End ----------*/

<head> 
 
    
 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 

 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700' rel='stylesheet' type='text/css'> 
 
    <link href='http://fonts.googleapis.com/css?family=Slabo+13px' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="heading-strip-small"> 
 
    
 
    <div id="heading-content"> 
 

 
     <div id="heading-text"> 
 
     <h1>CHRIS PATTISON<h1> 
 
      <h2>UX + INTERACTION DESIGN</h2> 
 
      <p id="begin-about">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod at velit et ullamcorper. Sed aliquam ipsum vitae imperdiet congue. <span id="moreText" value="Switch Class">Read more...</span> 
 
      </p> 
 
     </div> <!-- End of heading-text --> 
 
    
 
     <div id="social-bulbs"> 
 

 
      <div id="bulb1" class="bulb"> 
 
      <div class="wire"></div><div class="glass btn circular-btn"><i class="fa fa-stack-exchange fa-lg"></i></div> 
 
      </div> 
 

 
      <div id="bulb2" class="bulb"> 
 
      <div class="wire"></div><div class="glass btn circular-btn"><i class="fa fa-twitter fa-lg"></i></div> 
 
      </div> 
 

 
      <div id="bulb3" class="bulb"> 
 
      <div class="wire"></div><div class="glass btn circular-btn"><i class="fa fa-linkedin fa-lg"></i></div> 
 
      </div> 
 

 
     </div> <!-- End of social-bulbs --> 
 
      
 
    </div> <!-- End of heading-content --> 
 
    
 
    </div> <!-- End of heading-strip --> 
 

 

 
    <div id="nav-options"> 
 
    
 
    <p id="nav-text">To see some examples of my work or get in touch please choose from the following:</p> 
 

 
    <a href="#" class="btn primary">SELECTED WORKS</a> 
 
    <a href="#" class="btn primary">GET IN TOUCH</a> 
 

 
    </div>

Это просто ничего не делает. Может быть, это простая ошибка, но я чувствую, что мне не хватает чего-то фундаментального, что я просто не узнал/не понял.

Я знаю, что все соглашения об именах идентификаторов и классов css не являются семантическими или идеальными, пока я просто экспериментирую. Я был бы очень признателен, если кто-нибудь может помочь :)

источник

2015-09-14 Chris

Вы знаете, что '.switchClass()' является JQuery UI ** ** метод, а не обычный jQuery? Возможно, вы ищете ['.toggleClass()'] (http://api.jquery.com/toggleclass/)? – Travesty3

извините, нет, я не был, я связываюсь с jQuery UI, хотя. возможно, я должен просто использовать jQuery и вместо этого играть с переключением? – Chris

JavaScript использует «header-strip-small», в то время как html использует «заголовок-полоса-маленький» для классов. – Tubbe

Я вижу несколько проблем:

.switchClass() является метод jQueryUI, а не регулярные JQuery. Не уверен, что он делает то, что вы хотите.
Вы несовместимы со своими именами классов. В JS вы ссылаетесь на .header-strip-small и .header-strip-big, но в ваших HTML и CSS это .heading-strip-small и .heading-strip-big.
Вместо того, чтобы находить их по имени класса (которое вы меняете), вы должны добавить id к элементу, который хотите изменить классы, и просто использовать .toggleClass() на нем, чтобы переключить классы.

Смотрите мой обновленный перо: http://codepen.io/anon/pen/BojZJy

изменение HTML:

<div id="heading-container" class="heading-strip-small">

JS:

$(function() { 
    $('#moreText').click(function(){ 
    $("#heading-container").toggleClass("heading-strip-small heading-strip-big"); 
    return false; 
    }); 
});

источник

2015-09-14 21:10:32 Travesty3

спасибо, да @Tubbe сделал то же самое наблюдение относительно классов. Спасибо за более подробное объяснение и добавление альтернатив и т. Д. Очень полезно :) – Chris

Класс переключения неполадок в jQuery

ответ

Смежные вопросы