Question

我在here中使用jQuery ajax找到了在另一个页面上获取div的html的解决方案，所以当mouseenter一个链接时，我创建了这个脚本，它将使用ajax获取数据：

的index.html

<ul>
    <li><a class="basic" href="data1.html" rel="1" title="Accel World">Accel World</a>
    </li>
    <li><a class="basic" href="data2.html" rel="2" title="Ano Hi Mita Hana">Ano Hi Mita Hana</a>
    </li>
</ul>
<div id="content" class="isi" style="display:none">
<h1 class="title-content"></h1>
<div class="body-content"></div>
</div>

<script src="jquery.min.js"></script>
<script type="text/javascript">

$('a.basic')
.mouseenter(function() {
    var thisrel = $(this).attr('rel');
    var thistitle = $(this).attr('title');
    var thishref = $(this).attr('href');
    var content = $('#content');
    var idcontent = content.attr('id');
    var wadah = idcontent+'-'+thisrel;
    content.attr('id', wadah);
    var thattarget = $('#'+wadah);
    thattarget.show();
    thattarget.find('.title-content').text(thistitle);
    $.ajax({
        url: thishref,
        type:'GET',
        success: function(data){
             thattarget.find('.body-content').append($(data).find('#sct_content').html());
           console.log(thattarget.attr('id'));
        }
    })
  })
  .mouseleave(function() {
     var isi = $('.isi');
     var titleisi = $('.title-content').empty();
     var bodyisi = $('.body-content').empty();
     $(isi).attr('id', 'content');
     $(isi).hide();
  });
</script>

data1.html 和 data2.html

<!-- html stuff -->
 <div id="sct_content">
   <div class="article">data 1 <!-- data 2 for data2.html --></div>
 </div>
<!-- html stuff -->

当链接上的mouseenter时，这会在控制台上登录：

> XHR finished loading: GET "http://localhost/getip/data1.html". jquery.min.js:4
  send jquery.min.js:4
  m.extend.ajax jquery.min.js:4
  (anonymous function) custom.html:34
  m.event.special.(anonymous function).handle jquery.min.js:3
  m.event.dispatch jquery.min.js:3
  r.handle
content-1

问题：数据未显示在.body-content上，因为选择器$(data)未定义

Answer 1

删除ajax并尝试此操作 $(wadah).find('.body-content').load( thishref+" div#sct_content" );

Answer 2

Jithin的答案很好但我在问之前已经用过了。我在here

中找到了解决方案

以下jQuery不起作用：

$(data).find('#sct_content').html();

因为div是顶级元素而数据不是元素而是字符串，要使其工作，您需要使用.filter

$(data).filter('#sct_content')

当悬停链接时，使用jQuery ajax在另一个页面上获取div的html

2 个答案: