jquery/ajax加载href onClick多个链接答案

【问题标题】：jquery/ajax loading href onClick for multiple linksjquery/ajax加载href onClick多个链接
【发布时间】：2019-12-18 03:50:59
【问题描述】：

在 ionic 4 渐进式 Web 应用程序中构建菜单，我正在使用 ajax /jquery 将页面加载到 div。有没有办法告诉 jquery / 加载带有特定类的单击元素的href src=。而不是添加相同的代码 20 次来加载每个不同的页面

$('.classofButton').click ( function () {
     $('#content').load ('href of clicked object or link etc') ; 
} );

【问题讨论】：

尝试使用 $(this) 来获取被点击的元素并在它之上工作以实现你想要的。

标签： javascript jquery ajax

【解决方案1】：

您可以使用this获取href

$('.classofButton').click ( function () {
     $('#content').load ($(this).attr('href')) ; 
} );

【讨论】：

【解决方案2】：

你可以这样做。

$('.classofButton').click(function(event) {
  event.preventDefault();
  
  var href = $(this).attr('href');
  $('#content').load(href) ; 

});

#content {
  width: 200px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="classofButton" href="http://google.com">google.com</a>
<a class="classofButton" href="https://yahoo.com">yahoo.com</a>
<div id="content"></div>

【讨论】：