将对象附加到特定的动态 div jquery答案

【问题标题】：append object to specific dynamic div jquery将对象附加到特定的动态 div jquery
【发布时间】：2013-05-17 20:25:41
【问题描述】：

要附加的元素（到特定的 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>

到此 id 之一。

<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>

【问题讨论】：

标签： javascript append show-hide appendchild prepend

【解决方案1】：

如果我没记错的话，你想在每个链接之后附加播放器。为此，您可以使用以下脚本：

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/

希望对你有帮助。

【讨论】：

您的代码看起来很棒，但它不适用于我以前的 html 代码，当我单击链接时它直接指向 mp3 链接。您在jsfiddle.net/xEKcz 上的链接也不起作用。
你之前的html和我在fiddle使用的不一样吗？
不，我使用的是相同的 html 代码。只是当我在您提供的链接中进行测试时效果不佳。所以我点击链接“隐藏”链接直接访问mp3，它应该打开flash播放器。