JQuery, как нажать 2 кнопки в одной функции? Помощь, Bootstrap включен

У меня такой код верхней панели страницы (navbar):

<div class = "navbar-collapse collapse" id = "navbar10">
            <ul class = "navbar-nav nav-fill w-100">
                <li class = "nav-item">
                    <a class = "nav-link" href = "#">Homepage</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link active" href = "#button1">First Button</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link active" href = "#button2">Second Button</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link active" href = "#button3">Third Button</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link active" href = "#button4">4th Button</a>
                </li>
                 <li class = "nav-item">
                    <a class = "nav-link" href = "#">Contact</a>
                </li>
            </ul>
        </div>

И на многих строках у меня есть код для кнопок галереи. Каждая кнопка отображает разные типы фотографий.

        <div class = "gallery-menu text-center row">
            <div class = "col-md-12">
                <div class = "button-group filter-button-group">
                <div class = "flex-container">
                    <button data-filter = ".photo_b" id = "button1">First Gallery</button>
                    <button data-filter = ".photo_d" id = "button2">Second Gallery</button>
                    <button data-filter = ".photo_c" id = "button3">Third Gallery</button>
                    <button data-filter = ".photo_a" id = "button4">4th Gallery</button>
                    <button class = "active" data-filter = "*" id = "button5">All photos</button>
                </div>
                </div>
            </div>
        </div>

Благодаря этому коду, когда я нажимаю на главную панель в «Первой кнопке», благодаря «# button1» мы спускаемся в раздел «Первая галерея», но ничего не происходит. Я бы хотел, чтобы он работал так, чтобы, когда я одновременно нажимаю на «Первую кнопку», вы нажимали «Первая галерея»

Я пробовал много способов, например:

    $( "#button1" ).click(function() {
$( this ).addClass('active');
});

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

jquery function button click

27.10.2018 12:49

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

ИЗМЕНЕНО:

$("a[href='#button1']").click(function(e) {
    $($(this).attr("href")).click();
});

Ты действительно думаешь, что это поможет мне?

— 27.10.2018 13:03

Извините, я сначала не получил ваш вопрос, я отредактировал свой ответ.

— 27.10.2018 13:10

27.10.2018 12:56

Если я вас правильно понял, вы должны выбрать все теги a, у которых их href атрибут начинается с #button, а затем внутри их слушателя click вы должны использовать их значения href в качестве желаемого идентификатора кнопки, чтобы активировать функцию кнопок click. Вот фрагмент кода этого подхода:

$("button").click(function(){
console.info($(this).html());
});




/////////////////////////////////////////////
//    The code you are looking for
/////////////////////////////////////////////


$("a[href^='#button']").click(function(e) {
let btnID = $(this).attr("href");
console.info("link clicked => " + btnID);
setTimeout(()=>$(btnID).click() , 100);
});

.space{
height:350px
}
.space2{
height:50px
}

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


<div class = "navbar-collapse collapse" id = "navbar10">
            <ul class = "navbar-nav nav-fill w-100">
                <li class = "nav-item">
                    <a class = "nav-link" href = "#">Homepage</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link active" href = "#button1">First Button</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link active" href = "#button2">Second Button</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link active" href = "#button3">Third Button</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link active" href = "#button4">4th Button</a>
                </li>
                 <li class = "nav-item">
                    <a class = "nav-link" href = "#">Contact</a>
                </li>
            </ul>
        </div>
        
        <div class = "space"></div>
        
        
          <div class = "gallery-menu text-center row">
            <div class = "col-md-12">
                <div class = "button-group filter-button-group">
                <div class = "flex-container">
                    <button data-filter = ".photo_b" id = "button1">First Gallery</button>
                    <button data-filter = ".photo_d" id = "button2">Second Gallery</button>
                    <button data-filter = ".photo_c" id = "button3">Third Gallery</button>
                    <button data-filter = ".photo_a" id = "button4">4th Gallery</button>
                    <button class = "active" data-filter = "*" id = "button5">All photos</button>
                </div>
                </div>
            </div>
        </div>
        
        <div class = "space2">

27.10.2018 14:00

**try it should be work....**    
<!DOCTYPE html>
    <html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Document</title>
    </head>
    <body>

            <div class = "navbar-collapse collapse" id = "navbar10">
                <ul class = "navbar-nav nav-fill w-100">
                    <li class = "nav-item">
                        <a class = "nav-link" href = "#">Homepage</a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link active" href = "#button1">First Button</a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link active" href = "#button2">Second Button</a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link active" href = "#button3">Third Button</a>
                    </li>
                    <li class = "nav-item">
                        <a class = "nav-link active" href = "#button4">4th Button</a>
                    </li>
                     <li class = "nav-item">
                        <a class = "nav-link" href = "#">Contact</a>
                    </li>
                </ul>
            </div>


        <div class = "gallery-menu text-center row">
                <div class = "col-md-12">
                    <div class = "button-group filter-button-group">
                    <div class = "flex-container">
                        <button data-filter = ".photo_b" id = "button1">First Gallery</button>
                        <button data-filter = ".photo_d" id = "button2">Second Gallery</button>
                        <button data-filter = ".photo_c" id = "button3">Third Gallery</button>
                        <button data-filter = ".photo_a" id = "button4">4th Gallery</button>
                        <button class = "active" data-filter = "*" id = "button5">All photos</button>
                    </div>
                    </div>
                </div>
            </div>


        <!-- jQuery library -->
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </body>
    </html>

// вот код вашего скрипта ...

<script type = "text/javascript">
        $('ul li a').click(function(){
            var gallery_id = $(this).attr('href');
            if (gallery_id != "#"){
                $(gallery_id).click();  
            }
        })

        $("#button1").on('click', function(){
                console.info('clicked button1');
        })

        $("#button2").on('click', function(){
                console.info('clicked button2');
        })

        $("#button3").on('click', function(){
                console.info('clicked button3');
        })

        $("#button4").on('click', function(){
                console.info('clicked button4');
        })

        $("#button5").on('click', function(){
                console.info('clicked button5');
        })
    </script>

27.10.2018 14:22

Другие вопросы по теме

R dplyr - Как отменить цитирование ввода, чтобы он оценивался, а не цитировался - в частности, ggplot corre_cart ()

Почему время выполнения одного и того же определения функции в классе медленнее более чем в 10 раз?

Функции не выводят данные после их вызова

Создание пользовательской функции в отдельном файле php, доступном с контроллера

Экспресс (продолжение) асинхронная функция экспорта

Можно ли определить функцию после main ()?

Python: 5 недостающих позиционных аргументов

Запросить привилегии для функции

Модуль javascript в функции

Ввод функции в импортированный модуль

JQuery, как нажать 2 кнопки в одной функции? Помощь, Bootstrap включен

Ответы 3

Другие вопросы по теме

Похожие вопросы