校园项目技术求助：获取指定类名元素并绑定predict()函数

你可以通过以下几种方式实现需求：

原生JavaScript方案（推荐） #

这种方式无需修改原有HTML结构，通过JS动态绑定事件，同时阻止a标签默认跳转行为：

// 批量获取两个类名对应的所有元素
const targetLinks = document.querySelectorAll('.carepage-navlink, .carepage-text19');

// 为每个元素绑定点击事件
targetLinks.forEach(link => {
  link.addEventListener('click', function(event) {
    // 阻止a标签默认跳转
    event.preventDefault();
    // 调用你的predict函数
    predict();
    
    // 如果执行完predict后仍需要跳转到目标页面，取消下面注释
    // window.location.href = this.href;
  });
});

如果你的predict()是异步函数（比如包含API请求），需要等待它执行完成后再跳转，可改成异步写法：

targetLinks.forEach(link => {
  link.addEventListener('click', async function(event) {
    event.preventDefault();
    await predict(); // 等待异步函数执行完成
    window.location.href = this.href;
  });
});

直接修改HTML方案 #

如果允许修改原有HTML代码，可以直接给元素添加onclick属性，通过return false阻止默认跳转：

<a href="carepage2.html" class="carepage-navlink" onclick="predict(); return false;">
  <img
    alt="Rectangle281210"
    src="public/playground_assets/rectangle281210-0sag-200h.png"
    class="carepage-rectangle28"
  />
</a>

<a href="carepage2.html" class="carepage-text19" onclick="predict(); return false;"><span>다음</span></a>

注意事项 #

• 确保predict()函数在页面加载完成后可访问，建议把JS代码放在DOMContentLoaded事件里或页面底部：

document.addEventListener('DOMContentLoaded', function() {
  // 上述绑定代码放在这里
});

内容的提问来源于stack exchange，提问作者배강민