通过点击切换 link 值

Question

我正在尝试更改 link 的值和单击它时的功能。

<li><a href="#" class="headProjects">Projects</a></li>

切换 Class 不适合，因为点击后 DOM 有很多操作，我不需要切换。

当我第一次点击时它起作用了。

$('.headProjects').click(() => {
    $('.headProjects').text('home')
   $('.headProjects').removeClass('headProjects').addClass('homePage')
  })

Class 变化如上。当我尝试单击带有新 class 'homePage' 的元素时，它没有看到此项目 or/and simultaneously runs functions from first click.

$('.homePage').click(() => {
    $('.homePage').text('Projects')
$('.homePage').removeClass('homePage').addClass('headProjects')
  })

控制台没有错误

Answer 1

您需要动态绑定点击事件，因为当您将点击事件处理程序附加到 class headProject 时 homePage 不存在，因此点击事件处理程序不会被绑定. 请参阅以下解决方案

$(function(){
$(document).on('click','.headProjects', function(){
    $(this).text('home'); // change text of clicked element only
  $(this).removeClass('headProjects').addClass('homePage')
});
$(document).on('click','.homePage', function(){
    $(this).text('Projects'); // change text of clicked element only
  $(this).removeClass('homePage').addClass('headProjects');
});
});

.headProjects {
  color: green;
}
.homePage {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="#" class="headProjects">Projects</a></li>

通过点击切换 link 值

toggle link value by click

jquery

toggle