试图返回到上一个页面的JavaScript + HTML

Question

UPDATE

我解决了这个问题，这是很愚蠢的，我命名为“ID”错误。当它实际上是：id =“especies_menu_left”时，它是：id =“groups_menu_left”。 对不起，浪费你们的时间。

当我按下“Voltar”这个意思是“Back”的按钮时，它不会回来，任何人都可以帮助我吗？ 我的申请基本上是一个收容所的数据库，所以当人们想要收养一个新的宠物时，他们可以寻找各种收容所的选项。当选择“物种”时，它会显示该类别中的所有动物，当您喜欢动物时，可以点击它以获取更多信息。但是如果一个人出于某种原因不喜欢具体信息，他们可以返回去寻找更多的动物，这就是“Voltar”按钮有用的地方，但它不起作用。当我点击它时，它什么也不做。它在调试时不会显示错误，所以我的猜测是我在代码中丢失了一些东西。

(function($) { 
 

 
    $.extend({ 
 

 
    route: function(path) { 
 

 
     var previousUrl = window.location.hash.slice(1); 
 
     window.location.hash = '#' + path; 
 

 
     var pathArray = path.split('/'); 
 

 
     $('div[id^="template_"]').hide(); 
 
     $('button[id^="menu_"]').hide(); 
 

 
     var routes = [{ 
 
      id: 1, 
 
      name: 'index', 
 
      regex: '(index)' 
 
     }, // index 
 
     { 
 
      id: 2, 
 
      name: 'register', 
 
      regex: '(register)' 
 
     }, // register 
 
     { 
 
      id: 3, 
 
      name: 'especies', 
 
      regex: '(especies)' 
 
     }, // especies 
 
     { 
 
      id: 4, 
 
      name: 'especie_show', 
 
      regex: '(especie).*?(\\d+)' 
 
     }, // especie/{:id} 
 
     { 
 
      id: 5, 
 
      name: 'animal_show', 
 
      regex: '(animal).*?(\\d+)$' 
 
     }, // animal/{:id} 
 

 
     ]; 
 

 
     var route = 0; 
 
     var template = null; 
 

 
     $.each(routes, function() { 
 
     var test = new RegExp(this.regex); 
 

 
     if (test.test(path)) { 
 
      route = this.id; 
 
      template = this.name; 
 
     } 
 
     }); 
 

 
     //Logout button 
 
     $('#' + template + '_menu_logout').on('click', function() { 
 
     removeToken('token'); 
 
     }); 
 

 
     switch (template) { 
 

 
     case 'index': 
 
      break; 
 

 
     case 'register': 
 
      break; 
 

 
     case 'especies': 
 
      setButton('left', template, 'index', 'redirect', null); 
 

 
      $.api.getRecords('especie', null, getToken('token'), populateEspeciesTable); 
 
      break; 
 

 

 
     case 'especie_show': 
 
      setButton('left', template, 'especies', 'redirect', null); 
 
      setButton('right', template, 'especie/' + pathArray[1] + '/edit', 'redirect', null); 
 

 

 
      var params = 'filter=id_especie%3D' + pathArray[1] + '&fields=nome_especie'; 
 
      $.api.getRecords('especie', params, getToken('token'), populateEspecieShowName); 
 

 
      params = 'filter=especie_id_especie%3D' + pathArray[1] + '&fields=nome_animal, notas_animal, foto_animal'; 
 
      $.api.getRecords('animal', params, getToken('token'), populateEspecieTable); 
 

 
      break; 
 

 
     case 'animal_show': 
 
      var animalId = $('#id_animal').val(); 
 

 
      setButton('left', template, 'especie/' + animalId, 'redirect', null); 
 
      setButton('right', template, 'animal/' + pathArray[1] + '/edit', 'redirect', null); 
 

 
      var params = 'filter=id_animal%3D' + pathArray[1] + '&fields=nome_animal'; 
 
      $.api.getRecords('animal/' + pathArray[1], null, getToken('token'), populateAnimal); 
 

 
      var urlParts = previousUrl.split('/'); 
 
      $('#id_animal').val(urlParts[1]); 
 

 
      break; 
 

 
     } 
 

 
     $('#template_' + template).show(); 
 
    } 
 
    }); 
 

 

 
    function setButton(button, page, url, type, func) { 
 
    switch (type) { 
 
     case 'redirect': 
 
     $('#' + page + '_menu_' + button).off().on('click', function() { 
 
      $.route(url); 
 
     }); 
 
     break; 
 
    } 
 
    } 
 

 
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="template_especies"> 
 
    <nav class="navbar navbar-fixed-top df-nav cen col-md-12" role="navigation" style=""> 
 
    <ul class="nav navbar-nav" style="width: 100%"> 
 
     <li style="float: none; display: inline-block; position: relative; text-align: center"> 
 
     <a href="#index"><img src="img/icone_ap.png" height="47"></a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
    <div class="row vert-offset-top-30"></div> 
 
    <div class="col-md-2"></div> 
 
    <div class="col-md-8"> 
 
    <img src="img/cao.jpg" width="150" hspace="20"> <img src="img/gato.jpg" width="150"> 
 
    <table class="table" id="table_especies"> 
 
     <thead> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <footer> 
 
    <ul class="nav navbar-nav" style="width: 100%"> 
 
     <li class="pull-left"><button type="button" id="groups_menu_left" class="btn btn-default btn-menu">Voltar</button></li> 
 
     <li class="pull-left"><button type="button" id="groups_menu_logout" class="btn btn-default btn-menu-logout">Sair</button></li> 
 
    </ul> 
 
    </footer> 
 
    <div class="col-md-2"></div> 
 
</div>

在此先感谢！

Answer 1

尝试使用window.history.back();，并将其与onclick="window.history.back();

连接到元素您可以在下面试试。

<li class="pull-left"> 
 
    <button type="button" onclick="window.history.back();" id="groups_menu_left" class="btn btn-default btn-menu" >Voltar</button> 
 
</li>

更新：我不知道我理解你的问题，但你可以尝试：

<li class="pull-left"> 
    <a href="../"><button type="button" id="groups_menu_left" class="btn btn-default btn-menu" >Voltar</button></a> 
</li>