Как я могу использовать jQuery, чтобы сделать сайты более динамичными?

Я новичок в jQuery и узнаю, как заставить его взаимодействовать с моим реальным кодом, чтобы страницы были более интерактивными, но я немного запутался со всеми функциями. Я понимаю принципы jQuery, которые мне кажутся довольно простыми, но я просто не знаю, как вызывать функции. Сейчас я работаю над тестовой страницей, чтобы потренироваться и привыкнуть к ней.

Я пытаюсь выполнить 2 вещи, которые я видел на веб-сайте покупок.

Первое: заставьте слова появляться при наведении мыши на изображение, как в этом примере

  • Как вы можете видеть, при наведении курсора на изображение появляется "быстрый просмотр". Это первое, что я пытаюсь сделать.

Второе: сделать так, чтобы при появлении щелчка на изображении появлялось окно с более подробной информацией и информацией, а при выборе "закрытое" поле исчезать появлялось (пожалуйста, используйте предыдущий пример ссылки, чтобы увидеть эффект, которого я пытаюсь достичь).

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

< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" > < /script>
<script>

$( img ).mouseenter( handlerIn ).mouseleave( handlerOut );


</script >
.img {
  background-color: #f6f6f6;
  width: 241px;
  height: 341px;
}
<body>
  <div class="img">an image
    <div>
</body>

Я знаю, что это как-то связано с этим $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut ); во-первых, я пытаюсь сделать.

Во-вторых, я знаю, что это как-то связано с .toggle()

Будьте добры со мной, ребята, я новичок и только начинаю понимать, как начать использовать jQuery.

Большое спасибо!

Источник

1 ответ

Решение

Вы могли бы использовать hover функция: $( selector ).hover( handlerIn, handlerOut ) см.: http://api.jquery.com/hover/

  // You want this code to run after the document has been loaded
  jQuery(document).ready(function() {
        // Use .img to target all elements with the class 'img'
        $('.img').hover(function() {
            // This function is called when the mouse hovers over the element
            // Because this is function is an eventListener that is attached
            // to an element, you can call 'this' to target the element
            // that is being hovered over
            var image = jQuery(this);

            // Use the .append() function to insert content into an element
            image.append("<div class='quick-view'>Quick view</div>")
        },
        function() {
            // This function is called when the mouse leaves the element
            // In here we want to remove the quick-view element, so
            // first we have to find it. Again, use 'this' to
            // target the element that is hovered over.
            var image = jQuery(this);

            // Use the .find() function to look for the quick-view element
            // inside the element with the .img class:
            var quick-view = image.find('.quick-view');

            // Now to remove the quick-view element, use .remove()
            quick-view.remove();
        });
    });

Приведенный ниже код прикрепит прослушиватель onClick к элементу быстрого просмотра, чтобы вы могли указать своему сценарию, что делать при нажатии на элемент быстрого просмотра.
Обратите внимание, что мы не используем

 jQuery('.quick-view').click(function() {});

Это связано с тем, что после загрузки документа функция щелчка будет прикреплена ко всем элементам класса "Быстрый просмотр". Но после загрузки документа нет элементов с классом "быстрый просмотр". Эти элементы создаются динамически. Поэтому мы должны использовать специальную функцию jQuery, функцию.on(), которую мы прикрепим к элементу body. Смотрите http://api.jquery.com/on/

jQuery('body').on('click', '.quick-view', function() {
    // Even though the listerner seems to be attached to the body
    // you can still call 'this' to target the quick-view element.
    // In here you can add the box with more details to the body
    jQuery('body').append("<div class='more-info'>more info</div>")
});

Функциональность для элемента close может быть реализована почти таким же образом (всегда используйте.on() для элементов, которые не создаются при загрузке, но создаются динамически).

Источник
Другие вопросы по тегам