我想将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>
答案 0 :(得分：1)
您的方法是错误的，因为您在加载所有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>
答案 1 :(得分：0)
您可以使用：
var my_id = 2;
$("#container-example"+my_id).css("display","block");