堆栈内存溢出
  繁体   English   中英

如何在javascript中使多个按钮“单击以显示”工作？

[英]How can I make a multiple button "click to reveal" work in javascript?

 原文  2019-12-13 07:14:04  7   2    javascript

问题描述

我正在尝试制作一个相对简单的 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>

.container-fluid {
    width:40%;
    padding: 50px 0;
}
.card {
    background-color: rgb(24, 26, 27);
    border-top-color: rgba(102, 102, 102, 0.13);
    border-right-color: rgba(102, 102, 102, 0.13);
    border-bottom-color: rgba(102, 102, 102, 0.13);
    border-left-color: rgba(102, 102, 102, 0.13);
    border-radius: 20px;
    padding: 20px;
    border: 5px solid;
}


body {background-color: #000;}


.select {display:none;}

.selecton {display: block;}

2 个解决方案

解决方案1
 2 已采纳  2019-12-13 07:24:28

   <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>

删除按钮类型为“button1”它必须只是“button”

js：

 var buttons = document.querySelectorAll('.btn-block');
  buttons.forEach(function(button, index){
    button.addEventListener('click', function(){
       if(button.dataset.btn===`btn-${index}`){
            document.getElementById(`select${index}`).classList.toggle('selecton');
       }
    });
  });

解决方案2
 0  2019-12-13 07:22:07

你应该做这样的事情：

<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>

上面的代码有很多改进的空间。 但无论如何还是一步一步来。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何让我的 javascript 表单重置按钮工作？ 如何获得一个按钮来显示每次单击时不同的隐藏div？ 如何使我的移动菜单按钮显示和隐藏导航栏，以及在负数空间中单击时隐藏 如何使HTML元素被JavaScript隐藏，并在单击按钮时显示？ i /信息图标：单击以显示文本/可以使用css完成吗，如何操作？ 单击按钮使Javascript代码起作用 （Javascript）如何制作静音按钮以在单击时静音我的背景音乐？ 如何通过单击Javascript来使HTML TD设置为overflow：hiddenscroll隐藏滚动？ 如何使空白区域可单击以显示文本？ 如何在css / js中进行点击显示？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM