Question

当我单击任何链接时，其名称应在横幅中，例如sr no 1名称为jack和smith，然后TEST1应该由jack和test2替换为smith，而当我单击其他名称时，则代替jack和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);
   });

Answer 1

您不应为多个html元素分配相同的ID（格式不正确，并且jquery无法找到您想要的元素）。此外，您忘记为要在顶部填充的某些名称设置属性。最后，您使用的是replaceWith()，它删除了您希望稍后在单击时更新的元素。我将您的几个ID更改为类，并填充了缺失的ID，并更新了您的jquery以消除replaceWith()问题并使用类方法。见下文。

$(document).ready(function() {
  $("#h1").html($(".home").first().text());
  $("#h2").html($(".away").first().text());
});

$(".link").click(function() {
  var x = $(this).find(".home").first().html();
  var y = $(this).find(".away").first().html();
  $("#h1").html(x);
  $("#h2").html(y);
});

<div style="border:1px solid black;">
  <div style="display:inline; margin-left:20%;">
    <img style="display:inline;" src="https://via.placeholder.com/50x50" 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="https://via.placeholder.com/50x50" height="50px" width="50px">
    <p id="h2" style="display:inline;">TEST2</p>
  </div>
</div>
<br>
<div>
  <a href="#" class="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 class="home">jack</p>
        <p class="away">Smith</p>
      </div>
    </div>
  </a>
  <a href="#" class="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 class="home">Jhon</p>
        <p class="away">hill</p>
      </div>
    </div>
  </a>
  <a href="#" class="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 class="home">jason</p>
        <p class="away">smantha</p>
      </div>
    </div>
  </a>
  <a href="#" class="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 class="home">Ducan</p>
        <p class="away">Gio</p>
      </div>
    </div>
  </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

用其他div jQuery替换div数据

1 个答案: