В каком дочернем div Jquery добавлен класс?

Question

У меня есть фрагмент кода, но я не понимая, в которых дети элемент сценария JQuery добавляет класс, как я никогда не использовал .children() метод перед Вот HTML:

<section class="main"> 
 
    <div class="click"></div> 
 
    <div id="fc-wrapper" class="fc-wrapper"> 
 
    <!-- right-most handle piece --> 
 
    <div class="fc-handle fc-handle-pull"></div> 
 
    <div class="fc-perspective"> 
 
     <!-- right part overlay; get's darker --> 
 
     <div class="fc-overlay fc-overlay-reverse"></div> 
 
     <!-- middle handle piece --> 
 
     <div class="fc-handle fc-handle-out"> 
 
     <div></div> 
 
     </div> 
 
     <!-- inner bottom content part --> 
 
     <div class="fc-bottom"> 
 
     <div class="fc-bottom-bg"> 
 
      <div class="fc-content"> 
 
      <p>I can live with doubt, and uncertainty, and not knowing. I think it's much more interesting to live not knowing than to have answers which might be wrong. <span>Richard Feynman</span> 
 
      </p> 
 
      </div> 
 
     </div> 
 
     <div class="fc-overlay fc-overlay-solid"></div> 
 
     </div> 
 
     <!-- //fc-bottom --> 
 
     <!-- front and back of the flipping half --> 
 
     <div class="fc-flip"> 
 
     <div class="fc-front"> 
 
      <div class="fc-inner"> 
 
      <div class="fc-overlay fc-overlay-left"></div> 
 
      <!-- left-most part of handle --> 
 
      <div class="fc-handle fc-handle-in"> 
 
       <div></div> 
 
      </div> 
 
      <div class="fc-content"> 
 
       <h3><span>♞</span>Free revelations</h3> 
 
       <p>by NYCL</p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <!-- //fc-front --> 
 
     <div class="fc-back"> 
 
      <div class="fc-inner"> 
 
      <div class="fc-content"> 
 
       <div class="feynman"> 
 
       <span>1918 &ndash; 1988</span> 
 
       </div> 
 
      </div> 
 
      <div class="fc-overlay fc-overlay-right"></div> 
 
      </div> 
 
     </div> 
 
     <!-- //fc-back --> 
 
     </div> 
 
     <!-- //fc-flip --> 
 
    </div> 
 
    <!-- //fc-perspective --> 
 
    </div> 
 
    <!-- //fc-wrapper --> 
 
</section>

А вот theJQUERY код:

$(function() {   
    var $wrapper= $('#fc-wrapper'), 
     $handle = $wrapper.children('div.fc-handle-pull');     

    $handle.on('click', function(event) {     
     ($handle.data('opened')) ? close() : open();     
    }); 

    $wrapper.hammer().bind('dragend', function(event) { 
     switch(event.direction) { 
      case 'right': open(); break; 
      case 'left': close(); break; 
     } 
    }); 

    function open() { 
     $wrapper.addClass('fc-wrapper-open'); 
     $handle.data('opened', true); 
    } 

    function close() { 
     $wrapper.removeClass('fc-wrapper-open'); 
     $handle.data('opened', false); 
     } 

}); 

Я хочу знать, в каком ребенок Jquery добавляет класс 'к-обертку открытой. Пожалуйста, помогите мне . Заранее спасибо .

Answer 1

которых дети элемента сценарий JQuery добавляет класс

Не к любому ребенку div. из-за вар заявил на

var $wrapper= $('#fc-wrapper'), // <-----here 
    $handle = $wrapper.children('div.fc-handle-pull'); 

, и вы пытаетесь добавить класс в элемент оболочки, который не является элементом потомка дочерний элемент, но предок родительский элемента с щелчком.

Вы можете взглянуть на свой обработчик события:

$handle.on('click', function(event) {     
    ($handle.data('opened')) ? close() : open();     
}); 

На выше обработчик щелчка вы можете увидеть его с помощью троичной операции вызвать две функции close() и open() но сначала он проверяет data вашего выбора $handle, который является вашим 'div.fc-handle-pull' div.

Когда он пытается найти data в тройном операторе, так как trueclose() называется, который вызывает удаление добавленного класса. если false, то это вызывает добавление класса.

function open() { 
    $wrapper.addClass('fc-wrapper-open'); // adding the class 
    $handle.data('opened', true); // setting a data to true to call the 
}         // close() when click again 

function close() { 
    $wrapper.removeClass('fc-wrapper-open'); // removing the class 
    $handle.data('opened', false); // setting the data to false to call the 
}         // open() again when clicked 

Answer 2

JQuery добавляет класс fc-wrapper-open к вашему fc-wrapper div. Посмотрите на код:

var $wrapper= $('#fc-wrapper')

Теперь $wrapper это переменная, которая указывает на ваш к-обертку DIV

function open() { 
    $wrapper.addClass('fc-wrapper-open'); 
    $handle.data('opened', true); 
} 

это просто добавляет класс под названием 'fc-wrapper-open' к ваш fc-wrapper div

Answer 3

Как вы можете видеть, вы добавляете это класс от $wrapper.addClass. $wrapper указан в начале кода JS $wrapper= $('#fc-wrapper'),. И ваш элемент #fc-wrapper является section > div#fc-wrapper (второй DIV внутри <section class="main">

Answer 4

Функции открыта добавляют класс к-обертку открытой для FC-обертка Дива

function open() { 
    $wrapper.addClass('fc-wrapper-open'); 
    $handle.data('opened', true); 
}