javascript - Jquery加载到div中，指定链接数据中的div

Question

我进行了一些搜索，但尚未找到解决方案。我想通过点击 rel 链接来加载带有 jquery load 的页面，但对于更新，我希望 jquery 找到我单击的链接中的数据并更新该数据的 id 。

问题:我希望脚本找到 data-ajax="id_to_update"并更新具有 data-ajax 值的 div，而不是更新 id_du_milieu，当您单击链接 1 时，该值是 id_to_update；当您单击链接 2 时，它是 update_id_2。

我不想在 JavaScript 中添加 update_id_2 或 id_to_update，但我想要一个 jquery 函数，它将采用 data-ajax 的值作为要更新的 id

这是我的初始代码

<a href="churches.php" rel="charger_tout" data-ajax="id_to_update">Link 1</a>
<div id=id_to_update></div> <a href="churches.php" rel="charger_tout" data-ajax="update_id_2">Link 2</a>
<div id=update_id_2></div>

使用

$('a[rel*=charger_tout]').on('click', function () {
  $('#id_du_milieu').html('<img src="images/facebook_style_loader.gif" />');
  $('#id_du_milieu').load($(this).attr('href'), function (responseText, textStatus, XMLHttpRequest) {
    if (textStatus == 'error') {
      $('#id_du_milieu').html('<p>There was an error making the AJAX request</p>');
    }
  });
  return false;
});

Answer 1

在选择器中使用变量没有任何问题，所以你可以这样做:

var myId = $(this).data('ajax');
$('#'+myId).html(/* insert some stuff here */);

另一方面，如果你想用 data 属性来处理一个元素(你没有说清楚或者我不太理解)你可以这样做:

var myId = $(this).data('ajax');
$('a[data-ajax="+myId+"]').html(/* insert some stuff here */);

除了使用 jQuery $(this).data('ajax') 函数，您还可以使用 $(this).attr('data-ajax')那将等于相同。数据属性得到广泛支持，因此除非您关心 HTML 验证，否则即使在 IE4 中也可以使用它们。