将对象追加到特定的动态div jquery

时间:2013-05-22 17:03:21

标签: javascript append show-hide appendchild prepend

要追加的元素(对于特殊的div子):

<object width="305" height="20" data="player.swf" type="application/x-shockwave-flash">
<param value="transparent" name="wmode"><param value="player.swf" name="music">
<param value="mp3=http://linkfrom/a/songs.mp3&amp;loop=1&amp;autoplay=1&amp;showvolume=1&amp;autostart=true&amp;width=305" name="FlashVars">
</object>

到这个身份之一。

<div id="div1">
<a id="link1" href="http://linksto.com/songs1.mp3">hide</a>
<div id="showhere1"></div>
</div>
<div id="div2">
<a id="link2" href="http://linksto.com/songs2.mp3">hide</a>
<div id="showhere2"></div>
</div>
<div id="div3">
<a id="link3" href="http://linksto.com/songs2.mp3">hide</a>
<div id="showhere3"></div>
</div>

说我点击第一个链接id =“link1”新元素将添加到里面,文本链接将更改为“隐藏”。 点击后看示例:

<div id="div1">
<a id="link1" href="http://linksto.com/songs1.mp3">hide</a>
<div id="showhere1"><object data="player.swf" type="application/x-shockwave-flash"><param value="transparent" name="wmode"><param value="player.swf" name="music"><param value="mp3=http://www.radiosalomon.si/scripts/player/7.mp3&amp;loop=1&amp;autoplay=1&amp;showvolume=1&amp;autostart=true&amp;width=305" name="FlashVars"></object></div>
</div>
<div id="div2">
<a id="link2" href="http://linksto.com/songs2.mp3">show</a>
<div id="showhere2"></div>
</div>
<div id="div3">
<a id="link3" href="http://linksto.com/songs2.mp3">show</a>
<div id="showhere3"></div>
</div>

1 个答案:

答案 0 :(得分:0)

如果我没错,你想在每个链接后追加玩家。为此您可以使用以下脚本:

jQuery('a').click(function(){
   event.preventDefault()
   var id = jQuery(this).attr('id');
    if(jQuery(this).text() == 'show'){
        console.log( jQuery(this).next('div'));
         jQuery(this).next('div').html('<object data="player.swf" type="application/x-shockwave-flash"><param value="transparent" name="wmode"><param value="player.swf" name="music"><param value="mp3=http://www.radiosalomon.si/scripts/player/7.mp3&amp;loop=1&amp;autoplay=1&amp;showvolume=1&amp;autostart=true&amp;width=305" name="FlashVars"></object>');
        jQuery(this).text('hide')
    }else{
        jQuery(this).next('div').html('')
         jQuery(this).text('show')
    }

});

您可以根据代码更改对象值。

以下是演示:http://jsfiddle.net/xEKcz/

希望它能帮到你。