如何制作多个按钮；单击以显示“；用javascript工作？_Javascript

如何制作多个按钮；单击以显示“；用javascript工作？

javascript

如何制作多个按钮；单击以显示“；用javascript工作？,javascript,Javascript,我正在尝试制作一个相对简单的JavaScript文件，它允许我点击5个按钮中的一个，信息就会显示在屏幕上。目前，我有一个单一的工作揭示，但其他人没有出现简单地说，目标是拥有它，这样，如果我点击“选择1”，那么文本“测试1”将出现，“选择2”和“测试2”，依此类推任何帮助都将不胜感激 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta

我正在尝试制作一个相对简单的JavaScript文件，它允许我点击5个按钮中的一个，信息就会显示在屏幕上。目前，我有一个单一的工作揭示，但其他人没有出现

简单地说，目标是拥有它，这样，如果我点击“选择1”，那么文本“测试1”将出现，“选择2”和“测试2”，依此类推

任何帮助都将不胜感激

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 4, from LayoutIt!</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  </head>
  <body>

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-6 card">
            <div class="row">
                <div class="col-md-2">
                    <h3>
                        1
                    </h3>
                </div>
                <div class="col-md-10">
                    <h3 class="text-center">
                        Choose Your Selection
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">

                    <button type="button1" class="btn btn-success btn-lg btn-block">
                        Selection #1
                    </button>
                    <button type="button2" class="btn btn-success btn-lg btn-block">
                        Selection #2
                    </button>
                    <button type="button3" class="btn btn-success btn-lg btn-block">
                        Selection #3
                    </button>
                    <button type="button4" class="btn btn-success btn-lg btn-block">
                        Selection #4
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-6 card">
            <div class="row">
                <div class="col-md-2">
                    <h3>
                        2
                    </h3>
                </div>
                <div class="col-md-10">
                    <h3 class="text-center">
                        Choose Your Option
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p id="select1" class="select">test 1</p>
                    <p id="select2" class="select">test 2</p>
                    <p id="select3" class="select">test 3</p>
                    <p id="select4" class="select">test 4</p>
                </div>
            </div>
        </div>
    </div>
</div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
    <script type="text/javascript"> var tag = document.getElementById('select1'); var button = document.querySelector('button[type="button1"]'); button.addEventListener('click', function(){ tag.classList.toggle('selecton'); }); </script>
    <script type="text/javascript"> var tag = document.getElementById('select2'); var button = document.querySelector('button[type="button2"]'); button.addEventListener('click', function(){ tag.classList.toggle('selecton'); }); </script>
    <script type="text/javascript"> var tag = document.getElementById('select3'); var button = document.querySelector('button[type="button3"]'); button.addEventListener('click', function(){ tag.classList.toggle('selecton'); }); </script>
    <script type="text/javascript"> var tag = document.getElementById('select4'); var button = document.querySelector('button[type="button4"]'); button.addEventListener('click', function(){ tag.classList.toggle('selecton'); }); </script>
  </body>
</html>

你应该这样做：

<script>
    $(() => {
        $("button[type='button1']").on("click", () => {
            $("#select1").toggleClass("selecton");
        })
        $("button[type='button2']").on("click", () => {
            $("#select2").toggleClass("selecton");
        })
        $("button[type='button3']").on("click", () => {
            $("#select3").toggleClass("selecton");
        })
        $("button[type='button4']").on("click", () => {
            $("#select4").toggleClass("selecton");
        })
    })
</script>


$(() => {
$（“按钮[type='button1']）。在（“单击”上，（）=>{
$（“#select1”）.toggleClass（“selecton”）；
})
$（“按钮[type='button2']）。在（“单击”上，（）=>{
$（“#select2”）.toggleClass（“selecton”）；
})
$（“按钮[type='button3']）。在（“单击”上，（）=>{
$（“#select3”）.toggleClass（“selecton”）；
})
$（“按钮[type='button4']）。在（“单击”上，（）=>{
$（“#select4”）.toggleClass（“selecton”）；
})
})

上面的代码还有很多改进的余地。但无论如何，一步一个脚印。

你应该这样做：

<script>
    $(() => {
        $("button[type='button1']").on("click", () => {
            $("#select1").toggleClass("selecton");
        })
        $("button[type='button2']").on("click", () => {
            $("#select2").toggleClass("selecton");
        })
        $("button[type='button3']").on("click", () => {
            $("#select3").toggleClass("selecton");
        })
        $("button[type='button4']").on("click", () => {
            $("#select4").toggleClass("selecton");
        })
    })
</script>

   <body>

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-6 card">
            <div class="row">
                <div class="col-md-2">
                    <h3>
                        1
                    </h3>
                </div>
                <div class="col-md-10">
                    <h3 class="text-center">
                        Choose Your Selection
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">

                    <button type="button1" class="btn btn-success btn-lg btn-block" data-btn='btn-1'>
                        Selection #1
                    </button>
                    <button type="button2" class="btn btn-success btn-lg btn-block"  data-btn='btn-2'>
                        Selection #2
                    </button>
                    <button type="button3" class="btn btn-success btn-lg btn-block" data-btn='btn-3'>
                        Selection #3
                    </button>
                    <button type="button4" class="btn btn-success btn-lg btn-block" data-btn='btn-4'>
                        Selection #4
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-6 card">
            <div class="row">
                <div class="col-md-2">
                    <h3>
                        2
                    </h3>
                </div>
                <div class="col-md-10">
                    <h3 class="text-center">
                        Choose Your Option
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p id="select1" class="select">test 1</p>
                    <p id="select2" class="select">test 2</p>
                    <p id="select3" class="select">test 3</p>
                    <p id="select4" class="select">test 4</p>
                </div>
            </div>
        </div>
    </div>
</div>


$(() => {
$（“按钮[type='button1']）。在（“单击”上，（）=>{
$（“#select1”）.toggleClass（“selecton”）；
})
$（“按钮[type='button2']）。在（“单击”上，（）=>{
$（“#select2”）.toggleClass（“selecton”）；
})
$（“按钮[type='button3']）。在（“单击”上，（）=>{
$（“#select3”）.toggleClass（“selecton”）；
})
$（“按钮[type='button4']）。在（“单击”上，（）=>{
$（“#select4”）.toggleClass（“selecton”）；
})
})

上面的代码还有很多改进的余地。但无论如何，一步一个脚印。

您的文件中有jQuery。。为什么不使用它呢？有这么多不需要的代码，为什么你要一次又一次地尝试。而且-没有

类型

称为

button4

，它只是一个按钮。我会为按钮添加一个属性，其中包含p的id，然后在该属性之后切换。然后是

jQuery（'button.addacomonclasshere'）。在（'click'，函数（e）{var pToFind=jQuery（this）.attr（'theAttr'）；jQuery（'#'+pToFind.show（）；}）

或类似的东西。您的文件中有jQuery。。为什么不使用它呢？有这么多不需要的代码，为什么你要一次又一次地尝试。而且-没有

类型

称为

button4

，它只是一个按钮。我会为按钮添加一个属性，其中包含p的id，然后在该属性之后切换。然后是

jQuery（'button.addacomonclasshere'）。在（'click'，函数（e）{var pToFind=jQuery（this.attr'）；jQuery（'#'+pToFind.show（）；}）

或类似的东西。例如，使用id='button1'而不是type。您可以使用循环，而无需对所有内容进行硬编码。如果使用引导，则可以使用

d-none

类。但是我使用Digress1，例如，您使用id='button1'而不是type。您可以使用循环，而无需对所有内容进行硬编码。如果使用引导，则可以使用

d-none

类。但我偏离了+1，因为我没有更改他的HTML，但我建议，这不应该应用于所有的引导

btn

类。实际上，要使这段代码正常工作，我的主要关注点是js。我知道-但您的解决方案针对的是

.btn

，这将要求此事件发生在所有样式类似于带引导的按钮的东西上。-而且，由于您添加了

数据btn

，您还可以添加一个特定于这些按钮的类，现在应该可以正常工作了。我在querySelectorAll+1中将btn替换为btn块，因为我没有更改他的HTML，但我建议，这不应该应用于所有的引导

btn

类。实际上，要想让这段代码正常工作，我的主要关注点是js。我知道-但您的解决方案针对的是

.btn

，这将意味着这个事件会发生在所有类似于带引导的按钮的东西上。-而且，由于您添加了

数据btn

，您还可以添加一个特定于这些按钮的类，现在应该可以正常工作了。我在querySelectorAll中将btn替换为btn块

   <body>

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-6 card">
            <div class="row">
                <div class="col-md-2">
                    <h3>
                        1
                    </h3>
                </div>
                <div class="col-md-10">
                    <h3 class="text-center">
                        Choose Your Selection
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">

                    <button type="button1" class="btn btn-success btn-lg btn-block" data-btn='btn-1'>
                        Selection #1
                    </button>
                    <button type="button2" class="btn btn-success btn-lg btn-block"  data-btn='btn-2'>
                        Selection #2
                    </button>
                    <button type="button3" class="btn btn-success btn-lg btn-block" data-btn='btn-3'>
                        Selection #3
                    </button>
                    <button type="button4" class="btn btn-success btn-lg btn-block" data-btn='btn-4'>
                        Selection #4
                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-6 card">
            <div class="row">
                <div class="col-md-2">
                    <h3>
                        2
                    </h3>
                </div>
                <div class="col-md-10">
                    <h3 class="text-center">
                        Choose Your Option
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p id="select1" class="select">test 1</p>
                    <p id="select2" class="select">test 2</p>
                    <p id="select3" class="select">test 3</p>
                    <p id="select4" class="select">test 4</p>
                </div>
            </div>
        </div>
    </div>
</div>