Question

让我说我已经停止了HTML ...

<li><a href="#" id='DataSheets' >Data Sheets</a><font class="leftNavHitsFont">- (1)</font></li>
<li><a href="#" id='ApplicationNotes' >Application Notes</a><fontclass="leftNavHitsFont">- (6)</font></li>

我想要做的是，在这些链接的onclick上添加一个html，如果你点击第一个链接输出应该看起来像

<li><span>ajksdfskaj</span></li>  
<li><a href="#" id='ApplicationNotes' >Application Notes</a><fontclass="leftNavHitsFont">- (6)</font></li>

表示隐藏该li的原始html并为ex添加新的html。我上面写的跨度...如果我点击第二个链接，第一个li应该得到它的原始html和附加的html应该被删除并附加到当前的li bieng点击..在这种情况下输出应该看起来像.. 。

<li><a href="#" id='DataSheets' >Data Sheets</a><font class="leftNavHitsFont">- (1)</font></li>
<li><span>ajksdfskaj</span></li>

我试图通过各种方式实现这个目标...但是找不到正确的方法..
请帮帮我们.. 在此先感谢!!!!

Answer 1

这应该这样做：

$('li > a').live('click', function () {
    $(this).parent().siblings('li').find('a, font').show().end().find('span').remove();
    $(this).parent().append('<span>ajksdfskaj</span>').find('a, font').hide();
});

我使用.live()，因为您似乎是动态添加<a>，但如果不是这样，.click()就足够了。

演示：http://jsfiddle.net/VewSL/1/

Answer 2

构建Box9的代码：

var prevClickedLink = null;
var prevHTML = null;

$('a').live('click', function(){
 if( prevClickedLink ){
  //restore the previous html
  prevClickedLink.html(prevHTML);
 }

 prevClickedLink = $(this).parent();
 prevHTML = prevClickedLink.html();

 prevClickedLink.empty().append('<span>blabla</span>');
});

<ul>
    <li><a href="#">tekst goes here</a></li>
    <li><a href="#">tekst goes here</a></li>
    <li><a href="#">tekst goes here</a></li>
    <li><a href="#">tekst goes here</a></li>
    <li><a href="#">tekst goes here</a></li>
    <li><a href="#">tekst goes here</a></li>
</ul>

Answer 3

试试以下..


$(document).ready(OnDocumentReady);

var g_sInnerHTML = "ajksdfskaj"
var g_sPrevInnerHTML_li = "";
var g_oPrevLi = null;

function OnDocumentReady()
{
  $('li').click(On_Li_Click);
}

function On_Li_Click()
{
    if(g_oPrevLi != null && 
       g_oPrevLi != undefined &&
       g_sPrevInnerHTML_li != "")
    {
      // Reset the text of previous "li"..
      $(g_oPrevLi).html(g_sPrevInnerHTML_li);
    }
    g_sPrevInnerHTML_li = $(this).html();
    g_oPrevLi = $(this);
    $(this).html(g_sInnerHTML);
}

如何删除使用JQuery动态放置的HTML

3 个答案: