Javascript 用其他div jQuery替换div数据

当我点击任何链接时，它的名字应该出现在上面的横幅上，就像sr no 1的名字是jack and smith，然后TEST1应该由jack替换，test2应该由smith替换，当我点击其他名字，然后代替jack and smith，这些名字应该显示出来，我有100多个数据名，所以我只需要几行简单的jQuery代码，这样做不会刷新我的页面。。。还有一件事，当页面加载时，TEST1和TEST2应该显示自动第一个名称

对不起，我打字太多了，但这里有初学者，请帮忙

 <div style="border:1px solid black;">
  <div style="display:inline; margin-left:20%;">
    <img style="display:inline;" src="images/soccer-ball.png" height="50px" width="50px">
    <p id="h1" style="display:inline;" placeholder="Test">TEST1</p>
  </div>
  <div style="display:inline; margin-left:30%;">
    <img style="display:inline;" src="images/soccer-ball.png" height="50px" width="50px">
    <p id="h2" style="display:inline;">TEST2</p>
  </div>
</div>
<br>
<div>
  <a href="#" id="link" style="color: inherit; text-decoration: none;">
    <div style="border:1px solid black;">
      <div style="display:inline-block; border:1px solid black;">
        <p>Sr no 1</p>
      </div>
      <div style="display:inline-block; border:1px solid black;">
        <p id="home">jack</p>
        <p id="away">Smith</p>
      </div>
    </div>
  </a>
  <a href="#" id="link" style="color: inherit; text-decoration: none;">
    <div style="border:1px solid black;">
      <div style="display:inline-block; border:1px solid black;">
        <p>Sr no 2</p>
      </div>
      <div style="display:inline-block; border:1px solid black;">
        <p id="home">Jhon</p>
        <p id="away">hill</p>
      </div>
    </div>
  </a>
  <a href="#" id="link" style="color: inherit; text-decoration: none;">
    <div style="border:1px solid black;">
      <div style="display:inline-block; border:1px solid black;">
        <p>Sr no 3</p>
      </div>
      <div style="display:inline-block; border:1px solid black;">
        <p>jason</p>
        <p>smantha</p>
      </div>
    </div>
  </a>
  <a href="#" id="link" style="color: inherit; text-decoration: none;">
    <div style="border:1px solid black;">
      <div style="display:inline-block; border:1px solid black;">
        <p>Sr no 4</p>
      </div>
      <div style="display:inline-block; border:1px solid black;">
        <p>Ducan</p>
        <p>Gio</p>
      </div>
    </div>
  </a>
</div>
$(document).ready(function(){
 $("#h1").replaceWith($('#home').text());
 $("#h2").replaceWith($('#away').text());
});
$("#link").click(function(){
    var x = $("#home").html();
    var y = $("#away").html();
    //alert(x);
    $("#h1").html(x);
    $("#h2").html(y);
   });

TEST1

TEST2



$（文档）.ready（函数（）{
$（“#h1”）.replace为（$（“#home”）.text（））；
$（“#h2”）.replace为（$（'#away'）.text（））；
});
$（“#链接”）。单击（函数（）{
var x=$（“#home”）.html（）；
变量y=$（“#远离”）.html（）；
//警报（x）；
$（“#h1”）.html（x）；
$（“#h2”）.html（y）；
});

不应将同一id分配给多个html元素（格式不正确，jQuery将无法找到所需的元素）。此外，您忘了为一些要在顶部填充的名称设置属性。最后，您使用的是

replaceWith（）

，它删除了您希望稍后在单击时更新的元素。我将您的几个ID更改为类，填充缺少的ID，并更新jQuery以消除

replaceWith（）

问题，并使用类方法。见下文

$（文档）.ready（函数（）{
$（“#h1”）.html（$（“.home”）.first（）.text（））；
$（“#h2”）.html（$（“.away”）.first（）.text（））；
});
$（“.link”）。单击（函数（）{
var x=$（this.find（“.home”）.first（）.html（）；
var y=$（this.find（“.away”）.first（）.html（）；
$（“#h1”）.html（x）；
$（“#h2”）.html（y）；
});

TEST1

TEST2



当我加载页面时，我已经更新了jquery代码，第一人称数据自动显示，但当我单击第二人称时，它不起作用