Jquery如何在一个功能中点击2个按钮？帮助，包括 Bootstrap

Question

我有这样一段页面顶部栏（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>

多亏了这段代码，当我点击 "First Button" 中的主栏时，多亏了“# button1”，我们进入了 "First Gallery" 部分，但没有任何反应。我希望它能正常工作，以便当我同时单击 "First Button" 时，您也单击 "First Gallery"

我尝试了很多方法，比如：

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

但它不起作用。你可以按照你喜欢的方式去做，它不一定是jquery，如果它有效，因为我已经放弃了...... 我正在寻求帮助，谢谢你和最好的问候！

Answer 1

已编辑：

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

Answer 2

如果我没听错，你应该 select 所有 a 标签，它们的 href 属性 以 #button 开始 然后在他们的 click 监听器中，你应该使用他们的 href 值作为你想要的按钮 ID 来触发你的按钮 click 功能。这是此方法的代码片段：

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




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


$("a[href^='#button']").click(function(e) {
let btnID = $(this).attr("href");
console.log("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">

Answer 3

**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.log('clicked button1');
        })

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

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

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

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

Jquery如何在一个功能中点击2个按钮？帮助，包括 Bootstrap

Jquery how to click 2 buttons in one function? Help, Bootstrap included

jquery

function

click

button