如何用jQuery中的单个结果替换行项目

时间:2022-08-26 23:19:12

I have a list of search results, with embedded links that take you to an individual result detail. However, the details are small, and I would like to do an in-place substitution of the linked para with the result detail. So user searches, gets a list of results, clicks on link for one of the results, and the result detail fades in below that item.

我有一个搜索结果列表,其中包含嵌入式链接,可以将您带到单个结果详细信息。但是,细节很小,我想用结果细节对链接的para进行原位替换。因此,用户搜索,获取结果列表,点击其中一个结果的链接,结果详细信息在该项目下方淡入淡出。

The result list is already the result of an ajax call:

结果列表已经是ajax调用的结果:

$.ajax({
  type: 'GET',
  dataType: 'html',
  cache: false,
  url:  'search.php',
  data: terms,
  success: function(result) { 
    var details = $("#results",result).html();
    $("#results").html(details).fadeIn('slow');                         
    $('a',"#results").click(function(e) { 
      e.preventDefault();
      alert('bingo!'); /* this where I need to set up the replacement I guess */
    }); 
  }
});

with the <a> tag already set up to find the result:

已设置标签以查找结果:

<a href="search.php?id=1409">

which I'd like to use to fetch the inline replacement. Half my problem is understanding how to get the detail to fade in!

我想用它来获取内联替换。我的一半问题是了解如何让细节淡入!

2 个解决方案

#1


1  

Use .load() . It does the equivalent of .html() and .ajax() combined together.

使用.load()。它相当于将.html()和.ajax()组合在一起。

Short Example:

简短示例:

$.ajaxSetup({
   cache:false,
   type: "GET"
});

$("#results a").click(function(){
    $("#results").hide(0).load('search.php', terms).fadeIn('slow'); 
});

http://api.jquery.com/load#urldatacallback

http://api.jquery.com/load#urldatacallback

#2


0  

For the sake of completeness, the code I ended up using was:

为了完整起见,我最终使用的代码是:

$('a',"#results").click(function(e) { 
  e.preventDefault(); 
  var link = this; 
  var para = $(link).parent();
  var my_id = $(link).attr("href").match(/\d+/);
  $('<div id="results_'+my_id+'">').insertAfter(para);
  $('#results_'+my_id).hide().load("search.php #results > table", {id:my_id}).fadeIn('slow').slideDown('slow');
  $(link).unbind('click').click(function(e) {
    e.preventDefault(); 
    $('#results_'+my_id).toggle();
  });
});

However, for for the sake of fairness, and despite not really answering the question, I've given the vote to conqenator as he seems to need it more than me ;-)

然而,为了公平起见,尽管没有真正回答这个问题,我还是给了conqenator投票,因为他似乎比我更需要它;-)

#1


1  

Use .load() . It does the equivalent of .html() and .ajax() combined together.

使用.load()。它相当于将.html()和.ajax()组合在一起。

Short Example:

简短示例:

$.ajaxSetup({
   cache:false,
   type: "GET"
});

$("#results a").click(function(){
    $("#results").hide(0).load('search.php', terms).fadeIn('slow'); 
});

http://api.jquery.com/load#urldatacallback

http://api.jquery.com/load#urldatacallback

#2


0  

For the sake of completeness, the code I ended up using was:

为了完整起见,我最终使用的代码是:

$('a',"#results").click(function(e) { 
  e.preventDefault(); 
  var link = this; 
  var para = $(link).parent();
  var my_id = $(link).attr("href").match(/\d+/);
  $('<div id="results_'+my_id+'">').insertAfter(para);
  $('#results_'+my_id).hide().load("search.php #results > table", {id:my_id}).fadeIn('slow').slideDown('slow');
  $(link).unbind('click').click(function(e) {
    e.preventDefault(); 
    $('#results_'+my_id).toggle();
  });
});

However, for for the sake of fairness, and despite not really answering the question, I've given the vote to conqenator as he seems to need it more than me ;-)

然而,为了公平起见,尽管没有真正回答这个问题,我还是给了conqenator投票,因为他似乎比我更需要它;-)