使用 AJAX 和 jQuery .get() 从外部文档中检索特定元素

Question

使用 ajax 和 jQuery，当用户切换开关时，我尝试从外部文档中的特定元素加载内容。目标内容由切换开关元素的name 指定。

所以我从 HTML 开始...

<input id="toggle1" name="externalContent1" class="toggle" type="checkbox">
<input id="toggle2" name="externalContent2" class="toggle" type="checkbox">
<input id="toggle3" name="externalContent3" class="toggle" type="checkbox">

我第一次尝试使用'.load()'...

$('.toggle').click(function () {

  var section = '#' + $(this).attr('name');

  if ($(this).is(':checked')) {
    $('#target').load("content.htm " + section);
  }

  else {
    $(section).remove();
  }
});

这可行，但它替换了#target 元素的内容。我需要追加而不是替换。

然后我尝试了其他 SO questions 使用 .get() 的一些建议

if ($(this).is(':checked')) {
  var content;
  $.get('content.htm ' + section, function(data) {
    content = data;
    $('#target').append(content);
  });
}

但是这些使用.get()、.post() 和.ajax() 的解决方案（至少以我尝试过的方式），不允许我在content.htm 中指定一个元素，它只会拉整个文件。

有没有办法使用.get() 从外部文档中检索特定元素？

正如我一直在考虑的那样，我想我也可以在检索到的页面中搜索section，然后只附加它。我找到了this suggestion，并尝试了它，但我也没有运气：

if ($(this).is(':checked')) {
  $.ajax({
    url: 'content.htm',
    type: 'GET',
    success: function(res) {
      $(res.responseText).find(section).each(function(){
        $('#target').append($(this).html());
      });
    }
  });
}

Answer 1

稍加修改，您就可以使用.load() 解决方案。首先加载到单独的元素中，然后追加。

if ($(this).is(':checked')) {
    $('<div id="tempForLoad">').load("content.htm " + section, function(){
        $('#target').append($('#tempForLoad').html());
        $('#tempForLoad').remove();
    });
 }