Question

请耐心等待我，因为我是学生。我的导师让我们观看了5个YouTube视频，现在希望我们使用JQuery而不是标准JavaScript进行编程。我想做的就是用另一个文件中的元素交换一个元素。

这是我的HTML代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Testing JQuery</title>
    <script src="jquery-1.7.2.min.js"></script>
  </head>
  <body>
    <h1 id="header">Testing JQuery</h1>
    <p id ="dummy">Lorem Ipsum </p>
    <script src="changes.js"></script>
    <form name="input" action="changes.js">
    <input type="button" value="Change the Header">
    </form>
  </body>
</html>

这是我的JavaScript / JQuery代码：

$(document).ready(function() {
  $('input').click(function() {
    var url = $(this).attr('form');
    $('#header').load( greeting.html + '#ajax h1');
    return false;
  });
});

第三个文件叫做greeting.html，这就是它包含的全部内容：

<h1 id="ajax">Hello from jQuery with AJAX</h1>

Answer 1

要替换元素，load()将无法正常工作，因为它会在旧H1中加载新H1，但它不会替换它，因此您必须使用$.get并自行执行：< / p>

$(document).ready(function() {
    $('input').on('click', function() {
        $.get({
             url : 'greeting.html'
        }).done(function(data) {
             var h1 = $('<div />').append(data).find('h1#ajax');
             $('#header').replaceWith(h1);
        });
       return false;
    });
});

Answer 2

$('#header').load( 'greeting.html #ajax' );

这就是你所需要的一切。摆脱所有其他的东西。你不需要声明url而你也不需要返回false。

如何使用JQuery从另一个文档中的H1交换H1元素

2 个答案: