代码之家 › 专栏 › 技术社区 › Error_2646

避免导航侧栏中的冗余功能

ajax css html javascript

Error_2646 · 技术社区 · 4 年前

我对网络开发非常陌生,所以我在谷歌搜索正确的术语时遇到了困难。

侧边栏导航正在工作,但脚本丑陋且冗余。

有没有办法清理一下?比如将链接id和html文件位置存储在一个数组中,然后只使用一个脚本进行查找?

我不需要“为我编写代码”,只要朝着正确的方向轻推一下就行了。

例子:

<!DOCTYPE html>
<html>
  <link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $('#navigation_link_1').click(function(){
        $('#content_area').load('location_1.html');
      });       
    });
  </script>
  <script>
    $(document).ready(function () {
      $('#navigation_link_2').click(function(){
        $('#content_area').load('location_2.html');
      });       
    });
  </script>
  <script>
    $(document).ready(function () {
      $('#navigation_link_3').click(function(){
        $('#content_area').load('location_3.html');
      });       
    });
  </script>  
  <script>
    $(document).ready(function () {
      $('#navigation_link_4').click(function(){
        $('#content_area').load('location_4.html');
      });       
    });
  </script>  


  <body>

  <div class="container">
    <div id="concept-sidebar"">
      <h4 style="text-indent: 0px;"> <strong> My Sidebar </strong></h4>
      <div class="container" style="width:100%">
        <div class="list-group">
          <a id="navigation_link_1" 
             class="list-group-item custom" 
             > First Item </a>
          <a id="navigation_link_2"
             class="list-group-item custom"> Slowly Changing Dimensions (SCD) </a>
          <a id="navigation_link_3"
             class="list-group-item custom"> Important System Fields
          </a>    
          <a id="navigation_link_4"
             class="list-group-item custom"> Reference Data
          </a>
        </div>
      </div>
    </div>
  </div>
  </body>
</html>

0 回复 | 直到 4 年前

Dekel 4 年前

有多种方法可以解决这个问题(既然你要求的是方向而不是解决方案,我就给你一个解决方案的一般说明:):

选择所有相关元素,并在所有元素上都有一个单击事件,而不是设置每个元素上的单击事件处理程序:
$('.list-group-item').click(function(){ ... })
这里的选项针对所有具有该类的项目 list-group-item ,在你的情况下,这是 <a> 你正在寻找的元素。
从数据库中提取相关id <a> 你有(例如,你可以使用正则表达式)。另一个选择是使用 data-* 属性并从该属性中获取数字( <a data-id="1"> 和 $(el).data('id') ).
根据 id 你刚刚得到:
$('#content_area').load('location_' + id + '.html');