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元素的内容。我需要追加而不是替换。

然后我尝试使用.get()

从其他SO questions尝试了一些建议

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

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

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

正如我一直在考虑的那样，我想我也可以在检索到的页面中搜索.get()，并且只追加它。我找到了this suggestion，并试了一下，但我也没有运气：

section

Answer 1

通过一些黑客攻击，您可以使用.load()解决方案。首先加载到一个单独的元素中，然后追加。

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

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

1 个答案: