Функция класса click show/hide

Question

Я начал с JQuery, я пытался создать простую функцию для определения, если щелкнуть, скрыть один div и показать другой div.

мой код был:

jQuery(document).ready(function() { 
    jQuery('#dots').on('click', function() { 
    jQuery('#truncated_full_value').show(); 
    }); 
    jQuery('#dots').on('click', function() { 
    jQuery('#text-before-truncate').hide(); 
    }); 
}); 

И HTML был:

<dd class="truncated"> 
     <div class="text-before-truncate"> 
     <a href="#" class="dots" onclick"return flase"> ... </a> 
     </div> 

    <div class="truncated_full_value"> 
     <dt>Opties</dt> 
    </div> 
    </dd> 

Что я делаю неправильно?

Answer 1

Вы должны использовать . как селектор класса

jQuery(document).ready(function() { 
jQuery('.dots').on('click', function() { 
    jQuery('.truncated_full_value').show(); 
    jQuery('.text-before-truncate').hide(); 
    }); 
}); 

# является селектор идентификатора. Кроме того, вам не нужно прикреплять их в двух отдельных обработчиках. Вы можете поместить оба шоу/скрыть в один и тот же обработчик.

Answer 2

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

jQuery('.dots').on('click', function() { 
    jQuery('.truncated_full_value').show(); 
    jQuery('.text-before-truncate').hide(); 
}); 

Если вы хотите toggle:

jQuery('.dots').on('click', function() { 
    jQuery('.truncated_full_value, .text-before-truncate').toggle(); 
}); 

Answer 3

использование ниже кода. вам не нужно писать отдельные события для одного элемента. сочетать как одно событие.

В вашем HTML не существует элемента с идентификатором dots. вам нужно использовать . селектор класса как .dots

jQuery(document).ready(function() { 

    jQuery('.dots').on('click', function() { 
    jQuery('#truncated_full_value').show(); 
    jQuery('#text-before-truncate').hide(); 
    }); 

}); 

Answer 4

У всех вас есть класс селекторы использовать «.» префикса вместо «» #

jQuery(document).ready(function() { 
    jQuery('.dots').on('click', function() { 
    if(jQuery('.truncated_full_value').is(':visible')){ 
     jQuery('.truncated_full_value').hide(); 
     jQuery('.text-before-truncate').show(); 
    } 
    else{ 
     jQuery('.truncated_full_value').show(); 
     jQuery('.text-before-truncate').hide(); 
    } 
    }); 
});