Question

<div class="img-client"> 
<div class="client1"><a href="first_html.html"></a></div>
<div class="client2"><a href="second_html.html"></a></div>
<div class="client3"><a href="third_html.html"></a></div>
</div>
<div class="ajax"></div>

$(document).ready(function()
{
  $(".clients-img div").click(function()
  {

      $(".ajax").append('<img src="client1.png" alt="Question">');

        $(".ajax").load($(this).children().attr("href"));
 });
  return false;
});

点击后，将显示下面的图片和文字。如果我删除$(".ajax").load($(this).children().attr("href")); 图片有效。但如果我把它留在里面，屏幕上只显示文字。

Answer 1

使用append

代替使用load（）函数

$(".clients-img div").click(function(){
    $(".ajax").append('<img src="client1.png" alt="Question">');
    $(".ajax").append($(this).children().attr("href"));
});

Answer 2

.load()：

从服务器加载数据并将返回的HTML 放入匹配的元素。

因此，您希望.get()数据并将其附加到ajax类。

编辑：

 $(".clients-img div").click(function() {
  $.get($(this).children().attr("href"), function(data) {
   $(".ajax").append('<img src="client1.png" alt="Question">').append(data)
  })
 });

Answer 3

您正在使用.load内容覆盖图像。由于图像已经被追加，如果您只是颠倒了两者的顺序，它应该可以正常工作。

如何在事件点击的同时发布图片和.html？

3 个答案: