将 ID 设置为 div 并在使用 jquery 单击按钮后显示 div

Question

我想将 ID 设置为特定 div 并在单击按钮后显示此 ID。

ID对应于字符串“#container-”和按钮ID的串联。

我的 div 用于显示 Highcharts 图表。进入highcharts文件，ID为“#container-example1”或“#container-example2”。

总而言之，我想要一个 div，当我单击特定按钮时，它会显示我的特定图表。

这是我的代码，但它不起作用...你有什么想法吗？

提前致谢

<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Hello!</title>
      <link href="css/bulma.min.css" rel="stylesheet">
      <link href="css/fontawesome-all.min.css" rel="stylesheet">
   </head>
   <body>
      <nav class="navbar has-shadow">
         <div class="container">
            <div class="navbar-brand">
               <a class="navbar-item" href="#"><img src="./img/logo.png" alt=""></a>
            </div>
            <div id="navMenu" class="navbar-menu">
               <div class="navbar-end">
                  <div class="navbar-item has-dropdown is-hoverable">
                     <a class="navbar-link">About</a>
                     <div class="navbar-dropdown">
                        <a href="documentation.html" class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span class="name">Documentation</span></a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </nav>
      <div class="columns" id="">
         <aside class="column is-2 aside hero is-fullheight">
            <div>
               <div class="main">
                  <a href="index.html" class="item"><span class="icon"><i class="fas fa-home"></i></span><span class="name">Home</span></a>
               </div>
            </div>
         </aside>
         <div class="column is-1 is-fullheight" id="" style="border:1px solid black;">
            <section class="section">
            <div class="contain" >
               <p class="field"><span class="button is-dark is-small" id="example1">Example1</span></p>
               <p class="field"><span class="button is-dark is-small" id="example2">Example2</span></p>
            </div>
            </sec>
         </div>
         <div class="column is-9 is-fullheight" id="" style="border:1px solid red;">
            <section class="section">
            <div class="content" style="border:1px solid green;">
               <div class="group" id="" style="display: none;"></div>
            </div>
            </sec>
         </div>
      </div>
   </body>
<script src="js/jquery-3.3.1.min.js"></script>
   <script src="js/example1.js"></script>
   <script src="js/example2.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
         $('.button').on('click', function(){
             $('.button').removeClass('is-success');
             $(this).addClass('is-success');
             $(".group").attr("id","#container-"+this.id).css("display","block");
         });
      });
   </script>
</html>

Answer 1

你可以使用这个：

var my_id = 2;
$("#container-example"+my_id).css("display","block");

Answer 2

你的做法是错误的，因为你是在加载完所有JavaScript之后将id分配给div，所以显示特定id的图形的文件将不会呈现。 js/example1.js 加载时必须存在 ID。

您可能需要在隐藏的 div 中加载两个图表，并在点击时显示 div，如下例所示。或者通过 ajax 调用点击加载特定脚本。

$(document).on('click', '.button', function(){
  $('.button').removeClass('is-success');
    $(this).addClass('is-success');
    $('#container-'+ this.id).toggle();
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
   <body>
      <nav class="navbar has-shadow">
         <div class="container">
            <div class="navbar-brand">
               <a class="navbar-item" href="#"><img src="./img/logo.png" alt=""></a>
            </div>
            <div id="navMenu" class="navbar-menu">
               <div class="navbar-end">
                  <div class="navbar-item has-dropdown is-hoverable">
                     <a class="navbar-link">About</a>
                     <div class="navbar-dropdown">
                        <a href="documentation.html" class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span class="name">Documentation</span></a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </nav>
      <div class="columns" id="">
         <aside class="column is-2 aside hero is-fullheight">
            <div>
               <div class="main">
                  <a href="index.html" class="item"><span class="icon"><i class="fas fa-home"></i></span><span class="name">Home</span></a>
               </div>
            </div>
         </aside>
         <div class="column is-1 is-fullheight" id="" style="border:1px solid black;">
            <section class="section">
            <div class="contain" >
               <p class="field"><span class="button is-dark is-small" id="example1">Example1</span></p>
               <p class="field"><span class="button is-dark is-small" id="example2">Example2</span></p>
            </div>
            </section>
         </div>
         <div class="column is-9 is-fullheight" id="" style="border:1px solid red;">
            <section class="section">
            <div class="content" style="border:1px solid green;">
              <div id="container-example1" style="display:none">Loaded Graph 1</div>
              <div id="container-example2" style="display:none">Loaded Graph 2</div>
            </div>
            </section>
         </div>
      </div>
   </body>

对于 ajax 加载的脚本，您可以使用类似的东西，因为我没有您的示例文件而无法对其进行测试，但它至少应该为您指明正确的方向。

$(document).on('click', '.button', function() {
  $(".group").attr("id", "#container-" + this.id) //add id - must be before script loads/runs
  $.getScript('js/' + this.id + '.js') //load script with the same name as id
    .done(function() { //if loaded correctly
      $('.button').removeClass('is-success');
      $(this).addClass('is-success');
      $(".group").css("display", "block"); //show chart            
    })
    .fail(function() {
      /* do something when loading fails*/
    });
})

<body>
  <nav class="navbar has-shadow">
    <div class="container">
      <div class="navbar-brand">
        <a class="navbar-item" href="#"><img src="./img/logo.png" alt=""></a>
      </div>
      <div id="navMenu" class="navbar-menu">
        <div class="navbar-end">
          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">About</a>
            <div class="navbar-dropdown">
              <a href="documentation.html" class="navbar-item"><span class="icon"><i class="fas fa-book"></i></span><span class="name">Documentation</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="columns" id="">
    <aside class="column is-2 aside hero is-fullheight">
      <div>
        <div class="main">
          <a href="index.html" class="item"><span class="icon"><i class="fas fa-home"></i></span><span class="name">Home</span></a>
        </div>
      </div>
    </aside>
    <div class="column is-1 is-fullheight" id="" style="border:1px solid black;">
      <section class="section">
        <div class="contain">
          <p class="field"><span class="button is-dark is-small" id="example1">Example1</span></p>
          <p class="field"><span class="button is-dark is-small" id="example2">Example2</span></p>
        </div>
      </section>
    </div>
    <div class="column is-9 is-fullheight" id="" style="border:1px solid red;">
      <section class="section">
        <div class="content" style="border:1px solid green;">
          <div class="group" id="" style="display: none;"></div>
        </div>
      </section>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

将 ID 设置为 div 并在使用 jquery 单击按钮后显示 div

Set ID to div and show the div after clicking a button using jquery

jquery

show

highcharts

attr

bulma