Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Один js для всех ссылок (https://javascript.ru/forum/jquery/82698-odin-js-dlya-vsekh-ssylok.html)

sega1821 15.06.2021 17:46

Один js для всех ссылок
 
На сайте есть ссылки, в которых скрыта часть номера. Как сделать так, что бы при нажатии на одну ссылку номер стан виден во всех?

<a class="pokaz-nomer" data-last=" 999-99-99">8 (918)<span> xxx-xx-xx</span><p class="text-pokaz">нажмите и номер отобразится</p></a>


$('.pokaz-nomer').click(function() {
    $(this).find('span').text( $(this).data('last') );
});

рони 15.06.2021 18:58

sega1821,
<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
        $(function() {
            let link = $('.pokaz-nomer');
            link.click(function(event) {
                event.preventDefault();
                link.each(function(i, el) {
                    $(this).find('span').text($(this).data('last'))
                });
            });
        });
    </script>
</head>

<body>
    <a class="pokaz-nomer" data-last=" 999-99-99">8 (918)<span> xxx-xx-xx</span>
        <p class="text-pokaz">нажмите и номер отобразится</p>
    </a>
    <a class="pokaz-nomer" data-last=" 111-11-11">8 (918)<span> xxx-xx-xx</span>
        <p class="text-pokaz">нажмите и номер отобразится</p>
    </a>
</body>

</html>

sega1821 15.06.2021 19:03

Спасибо большое, только что сам разобрался. Сможете подсказать, есть ли возможность отображаения номера на всём сайте? Т.е. при переходе на другую страницу, что бы все номера остались отображенными?

рони 15.06.2021 19:35

sega1821,
<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>
        $(function() {
            let link = $('.pokaz-nomer');
            const openNumber = function() {
                link.each(function(i, el) {
                    $(el).find('span').text($(el).data('last'));
                    localStorage.showNumber = "show";
                });
            }
            let showNomer = localStorage.showNumber;
            showNomer ? openNumber() : link.click(openNumber);


        });
    </script>
</head>

<body>
    <a class="pokaz-nomer" data-last=" 999-99-99">8 (918)<span> xxx-xx-xx</span>
        <p class="text-pokaz">нажмите и номер отобразится</p>
    </a>
    <a class="pokaz-nomer" data-last=" 111-11-11">8 (918)<span> xxx-xx-xx</span>
        <p class="text-pokaz">нажмите и номер отобразится</p>
    </a>
</body>

</html>

sega1821 15.06.2021 19:37

Спасибо Рони, вы лучший! :thanks:


Часовой пояс GMT +3, время: 00:55.