Как более эффективно управлять событиями нажатия кнопки HTML?

Выглядеть смешно при нажатии одной кнопки - это нелепо, в то время как у каждой кнопки должны быть свои события:

 function allStories() {
     $('#zero-md').hide();
     $('.container-aboutme').hide();
     $('.container-allstories').show();
     $('.container-allstories').load("pages/allstories.html");
     $("#home").removeClass("nav-link active").addClass("nav-link");
     $("#aboutme").removeClass("nav-link active").addClass("nav-link");
     $("#allposts").removeClass("nav-link").addClass("nav-link active");
 }

 function aboutMe() {
     $('#zero-md').hide();
     $('.container-allstories').hide();
     $('.container-aboutme').show();
     $('.container-aboutme').load("pages/about.html");
     $("#home").removeClass("nav-link active").addClass("nav-link");
     $("#allposts").removeClass("nav-link active").addClass("nav-link");
     $("#aboutme").removeClass("nav-link").addClass("nav-link active");
 }

     <li class="nav-item">
         <a class="nav-link" id="allposts" onclick="allStories()" href="#">All posts</a>
     </li>
     <li class="nav-item">
         <a class="nav-link" id="aboutme" onclick="aboutMe()" href="#">About me</a>
     </li>

Есть ли лучший, более эффективный способ организовать такие мероприятия с меньшим количеством кода?

Всего 2 ответа


Вы имеете в виду это

$("#nav").on("click",".nav-link",function(e) {
  e.preventDefault(); // stop the link
  const id = this.id;
  const $thisContainer = $('.container'+id);

  $('#zero-md').hide();
  $('.container').hide(); // hide all containers
  $thisContainer.load("pages/"+id+".html",function() { // perhaps not load if already loaded
    $thisContainer.fadeIn("slow");
  }) ;
  $(".nav-link").removeClass("active")
  $(this).addClass("active")
})
<ul id="nav">
  <li class="nav-item">
    <a class="nav-link" id="allposts" href="#">All posts</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="about" href="#">About me</a>
  </li>
</ul>

Да. Постарайтесь сохранить свой код СУХИМ (не повторяйте себя.)

Добавьте прослушиватель событий в свой JS.
Используйте e.target чтобы определить, что было e.target .
Объединяйте свои команды, когда они работают с одними и теми же элементами.
Не удаляйте класс, а затем добавьте тот же класс обратно. Просто удалите тот, от которого вы хотите избавиться.

Я добавил несколько элементов stand, так как не все присутствовало в вашем HTML.

$('.nav-link').click( (e)=>{
  let theLink = $(e.target).attr('id');
  const container = '.container-'+$(theLink).attr('id');
  $('#zero-md').hide();
  $('.container').hide();
  $(container).show().load("pages/"+theLink+".html");
  alert('loading: pages/'+theLink+'.html');
  $("#home").removeClass("nav-link active").addClass("nav-link");
  $(".nav-link").removeClass("active");
  $("#"+theLink).addClass("active");
});
.active {
  font-size: 1.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="nav-item">
  <a class="nav-link" id="allstories" href="#">All posts</a>
</li>
<li class="nav-item">
  <a class="nav-link" id="aboutme" href="#">About me</a>
</li>
<div class="container container-allstories">All Stories</div>
<div class="container container-aboutme">About Me</div>
<div id="zero-md">Zero MD</div>


Есть идеи?

10000