На каждом из моих элементов портфолио у меня есть div, перекрывающий верх с непрозрачностью, установленной на ноль. Когда пользователь наводит курсор на элемент (или в случае с мобильным устройством, нажимает на него), div переходит в непрозрачность: 1. Моя проблема заключается в том, что, если пользователь нажимает на любой из тегов привязки, расположенных в этом div (.portfolio- текст), он забирает их со страницы (в данный момент href = "#", поэтому он обновляет страницу), прежде чем они смогут даже увидеть ссылку.

Мое решение состоит в том, чтобы добавить отключенный класс (спасибо Стивену Томасу ниже) к каждому из тегов привязки, а затем удалить класс с помощью функции jquery .hover (). К сожалению, если тег привязки нажимается одновременно с наведением курсора (как на мобильном телефоне), он все равно обновляет страницу, поскольку я предполагаю, что JQuery слишком быстро удалял класс.

Чтобы это исправить, я пытаюсь использовать функцию setTimeout в моем обработчике, но он больше не удаляет скрытый класс из моих якорных элементов, даже если console.log в этой функции времени ожидания все еще вызывается.

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

РЕДАКТИРОВАТЬ:

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

https://codepen.io/colesam/full/NvLBPL/

Html

<div class="full-page" id="portfolio-page">
    <div class="row">
        <div class="col-12">
            <h2 class="center-text">My Portfolio</h2>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="">
            <!-- offset col -->
        </div>
        <div class="col-12" id="portfolio-items">
            <div class="row">
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text" id="test">
                            <h4>Wireframes</h4>
                            <a href="#" class="disabled">View</a>
                        </div>
                    </div>
                </div>        
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a href="#">View</a>
                        </div>
                    </div>
                </div> 
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a href="#">View</a>
                        </div>
                    </div>
                </div> 
            </div>
        </div>        
    </div>
</div>

Jquery

$(document).ready(function() {    
    //  PORTFOLIO EVENT LISTENERS
    $('.portfolio-text').hover(
        function() {    //  hover on function
            setTimeout(function() {console.log('test'); $(this).children('a').removeClass('disabled');}, 50);
        },

        function() {    //  hover off function
            $(this).children('a').addClass('disabled');
        }
    );
});
2
Samuel Cole 27 Авг 2017 в 04:01

3 ответа

Лучший ответ

Похоже, проблема с this контекст, и он выходит за рамки вашего закрытия. Почему бы не попробовать:

$('.portfolio-text').hover(function() {
    var $that = $(this);  // <--- HERE
    setTimeout(function() {
        // here 'this' is in a different context/scope
        $that.children('a').removeClass('disabled'); // USE HERE
    }, 50);
}, function() {
    $(this).children('a').addClass('disabled');
});

Кроме того, вы можете предотвратить эти клики, например, с помощью чего-то вроде:

$('.portfolio-text').find('a:not(:visible)').on('click', function(e) {
    e.preventDefault();
    return false;
});

Возможно, начните с этого и развивайте его оттуда.

Надеюсь это поможет.

1
Yes Barry 27 Авг 2017 в 02:34

Вы можете сделать Ajax на рабочем столе и использовать ссылку на мобильном телефоне. Просто не делайте ссылку кликабельной до тех пор, пока после первого события мобильного клика (или имитируемого события наведения мыши нажмите на изображение), который делает ссылку видимой.

Вот основная идея. Используйте data-href для URL-адреса, когда они наводят курсор мыши, создают атрибут href для ссылки ... когда они не удаляют атрибут href из ссылки, т.е. href = "". Теперь он работает для мобильных устройств и не ломает рабочий стол (так как вы можете нажать на ссылку после наведения мыши).

<script>
$(document).ready(function() {    
    //  PORTFOLIO EVENT LISTENERS
    $('.portfolio-text').hover(
        function() {    //  hover on function
        $(this).children('a').removeClass('disabled');
        // if mobile code
            $(this).children('a').attr("href", $(this).children('a').data( "href" ))
        // else
        // do ajax to get data to desktop browser divide ... the data is located at $(this).children('a').data( "href" ) for ajax.      
        },
    );
});
</script>

<div class="full-page" id="portfolio-page">
    <div class="row">
        <div class="col-12">
            <h2 class="center-text">My Portfolio</h2>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="">
            <!-- offset col -->
        </div>
        <div class="col-12" id="portfolio-items">
            <div class="row">
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text" id="test">
                            <h4>Wireframes</h4>
                            <a data-href="wireframe.html" class="disabled">View</a>
                        </div>
                    </div>
                </div>        
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a data-href="portfolio2.html" >View</a>
                        </div>
                    </div>
                </div> 
                <div class="col-12">
                    <div class="portfolio-item">
                        <img src="http://basketball.net.au/wp-content/uploads/2008/04/placeholder.jpg" class="img-fluid"></img>
                        <div class="portfolio-text">
                            <h4>Coming Soon</h4>
                            <a data-href="portfolio2.html" >View</a>
                        </div>
                    </div>
                </div> 
            </div>
        </div>        
    </div>
</div>
0
Wayne 27 Авг 2017 в 02:44

Похоже, вы описываете меню навигации по сайту, если да, то почему вы беспокоитесь о jquery? Вы должны посмотреть на родительские и дочерние отношения, родительский div должен оставаться активным, пока дочерние элементы находятся. Я мог бы предоставить вам некоторый код, но сначала мне нужно убедиться, что вы говорите о меню / навигации или о чем-то еще, как о слайд-шоу ...

0
user5340092user5340092 27 Авг 2017 в 01:22