Member 13971174 Ответов: 1

Помогите с конвертированием jQuery для JavaScript-кода


Здравствуйте, кто-нибудь может помочь мне с преобразованием этого кода Jquery в чистый javascript я написал этот скрипт в Jquery, но, к сожалению, я не могу иметь дело с javascript.
Может быть, это тоже кому - то пригодится. Это подсказка для графических элементов (img) в woocommerce, которую можно найти в кратком описании товара магазина.

<script type="text/javascript">
// tooltip for Pict

$('.woocommerce-product-details__short-description img').hover(function() 
       {
            var altText = $(this).attr('alt');
            var addingText = '<div class="tooltipText">'+altText+'</div>';
            $(this).before(addingText);

            if ( $( ".tooltipText" ).length > 0 ) 
            {
                window.onmousemove = function (e) {
                var x = e.clientX,
                    y = e.clientY;
                tooltipText[0].style.top = (y + 20) + 'px';
                tooltipText[0].style.left = (x + 20) + 'px';
                }
             }

       }, function()
       {
            $(this).parent().find('.tooltipText').remove();
       })
</script>


Что я уже пробовал:

Я начал его конвертировать, но уже застрял на второй строке ...

F-ES Sitecore

Взгляните на это http://youmightnotneedjquery.com/ Синтаксис $(...) называется селектором, поэтому используйте поиск на этом сайте для поиска альтернатив . То же самое можно проделать и с другими вещами.

CHill60

Также смотрите этот вопрос CP/решения Преобразование Jquery в Javascript[^]

Member 13971174

Спасибо, ребята, за советы. Но не могли бы вы помочь мне с первой строкой? - я не могу найти способ написать $('.woocommerce-product-details__short-description img').hover(function() в JS

Dominic Burford

Первая строка использует JQuery hover. Это похоже на событие наведения курсора мыши Javascript. Поэтому я бы посмотрел на них, чтобы начать работу.

Member 13971174

о, хорошо. Теперь я понимаю. Спасибо.

Sinisa Hajnal

Вы можете войти в код jQuery и просто скопировать его. Для селекторов современный javascript имеет querySelector и querySelectorAll на элементе документа, который работает очень похоже (то же самое?) на селекторы jQuery. То же самое касается событий, есть некоторые, которые связаны непосредственно, и другие, которые могут быть использованы вместо некоторых из них jQuery. Опять же, вы можете использовать код jQuery, чтобы проверить, как они используются.

1 Ответов

Рейтинг:
0

Shravan Kumar A S

Вы можете попробовать приведенный ниже код

let element=document.getElementsByClassName("woocommerce-product-details__short-description");
или
пусть элемент=документ.querySelector(".woocommerce-product-details__short-description");

element.addEventListener("mouseenter", функция( событие ) {
//Добавьте свой код здесь
});