gpt4 book ai didi

javascript - 如何使用 jquery 显示和隐藏 html 页面的不同

转载 作者:太空宇宙 更新时间:2023-11-03 21:12:03 25 4
gpt4 key购买 nike

我在结果页面上有 2 个部分,一个显示结果表,一个显示基于结果的各种图表,它们在 <section> 中标签,默认显示的是表格:<section class="results_table" style="display: inline">我如何使用 jquery 隐藏它并显示图表部分:<section class="results_charts" style="display: none">单击相关按钮时

<div class="btn-group">
<button type="button" id="table" class="btn btn-primary">Table</button>
<button type="button" id="chart" class="btn btn-primary">Charts</button>
</div>

我目前正在尝试这个我在类似的问题中发现:

$("#chart").on("click", "#switch", function(e){
$("#results_table, #results_charts").toggle();
});

但我不知道如何添加第二个按钮,也不会切换我的 View :)

其次,是否有人可以推荐任何好的 javascript/jquery 教程?

***** HTML 页面 *****此页面作为 subview 从我的 Controller 加载:Search/execute_search

    <section class="results_head">
<div class="row">
<div class="col-md-12"><!--<?php if(empty($chart)){echo "EMPTY" . '<br />';} else{ print_r($chart);} ?>--></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 btn_down"><a href="#bottom"><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down" /> Bottom <span class="glyphicon glyphicon-arrow-down" /></button></a></div>
<div class="col-md-4"><input type="hidden" id="chartData" value='<?php echo $chart; ?>' /></div>
</div>
<div class="row">
<div class="col-md-4">
<div class="results_count">
<h3><strong>Your Search:</strong></h3>
<p>Results Table: <font class="text-primary"><strong><?php if($_POST['tbl'] === 'p_results'){echo "New Table";} else{echo "Old Table"; } ?></strong></font></p>
<p class="cat">Catogory: <font class="text-primary"><strong><?php if($_POST['col'] === 'code'){echo "test";} else{echo str_replace('_', ' ', $_POST["col"]);} ?></strong></font></p>
<p><?php
if($_POST['col'] == 'result' && $_POST['res'] == NULL){echo 'Showing ' . '<font class="text-primary">' . '<strong>' . "ALL" . '</strong>' . '</font>' . ' results';}
elseif ($_POST['col'] == 'result'){echo 'Showing all results for: ' . '<font class="text-primary">' . '<strong>' . $_POST["res"] . '</strong>' . '</font>';}
else{;} ?>
</p>
<p style="text-transform: capitalize;"><?php if($_POST['res']){echo 'Result set: ' . '<font class="text-primary">' . '<strong>' . $_POST['res'] . ' Results' . '</strong>' . '</font>';} else{echo 'Result set: ' . '<font class="text-primary">' . '<strong>' . "All Results" . '</strong>' . '</font>';} ?></p>
<p><?php if($_POST['sdate'] && $_POST['edate']){echo 'Within Date Ranges: ' . '<font class="text-primary">' . '<strong>' . $_POST['sdate'] . '</strong>' . '</font>' . ' and ' . '<font class="text-primary">' . '<strong>' . $_POST['edate'] . '</strong>' . '</font>';} else{echo "<font class='text-danger'>" . "<strong>" . "No Date Range was specified" . "</strong>" . "</font>";} ?></p>
<p><?php if($_POST['terms']){echo 'With the following keywords: ' . '<font class="text-primary">' . '<strong>' . $_POST['terms'] . '</strong>' . '</font>';} else{echo "<font class='text-danger'>" . "<strong>" . "No keywords were specified" . "</strong>" . "</font>";} ?></p>
<hr />
<p><?php echo "Your Search Returned" . " " . '<strong>' .'<font class="text-primary">' . count($results) . '</font>' . '</strong>' . " " . "Results, " .
"out of " . '<strong>' . '<font class="text-primary">' . count($totals) . '</font>' . '</strong>' . " records."?></p>
</div>
</div>
<?php if(empty($chart)){echo "<div class='col-md-4'>" . "</div>";} else{echo "<div class='col-md-4 chart' id='donut'>" . "</div>";} ?>
<div class='col-md-4'></div>
</div>
<div class="row">
<div class="col-md-12 select_menu">
<div class="btn-group">
<button type="button" id="table" class="btn btn-primary">Table</button>
<button type="button" id="chart" class="btn btn-primary">Charts</button>
</div>
</div>
</div>
</section>
<section class="results_table" style="display: inline">
<div class="row tbl_row">
<div class="col-md-12">
<table class="tbl_results">
<thead>
<tr>
<th><?php if($results){echo implode('</th><th>', array_keys(current($results))); } elseif($_POST['terms']){echo "No Results were found to match: " . $_POST['terms']; }else {echo "No Results Found"; } ?></th>
</tr>
</thead>
<tbody>
<tr>
<?php foreach ($results as $row): array_map('htmlentities', $row); ?>
<tr>
<td><?php echo implode('</td><td>', $row); ?></td>
</tr>
<?php endforeach; ?>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="top_btn">
<a href="#top"><button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-arrow-up"></span> Back to Top <span
class="glyphicon glyphicon-arrow-up"></span></button></a>
<a name="bottom">
</div>
</div>
<div class="col-md-8"></div>
</div>
</section>
<section class="results_charts" style="display: none">
<div class="row">
<div class="col-md-12 chart2" id="bar"></div>
</div>
<div class="row">
<div class="col-md-12 chart2" id="line"></div>
</div>
<div class="row">
<div class="col-md-12 chart2" id="area"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</section>

最佳答案

用它来显示图表部分

$("#chart").on("click", function(){
$("#results_table").hide();
$("#results_charts").show();
});

使用这个只显示结果

$("#table").on("click", function(){
$("#results_charts").hide();
$("#results_table").show();
});

关于javascript - 如何使用 jquery 显示和隐藏 html 页面的不同 <section>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45759786/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com