jquery - ajax - 查看不同的内容

Question

我想在同一页面中听音乐或观看视频（无需在浏览器中打开新页面）。所以我想为此目的使用ajax。我有不同的文件，我想对它们做些什么取决于它的类型。例如，我有1.mp3- 听，2.avi- 看，3.png- 看。如果我单击 href，我需要有相同的行为。<a href="http://server.com/3.png" target="blank"></a>- 它打开新页面并加载3.png。请帮我！谢谢。

Answer 1

这个怎么样：

<div id="contentdiv" style="display:none">
<iframe id="contentframe"></iframe>
</div>

<script>
$(document).ready(function(){
 $('a').click(function(){
   var hreflink = $(this).attr('href');
   $('#contentframe').attr('src',hreflink);
   $('#contentdiv').show();
   return false;
 });
});
</script>

Answer 2

为您的内容创建单独的类：

<a href="http://server.com/1.png" target="blank" class='png'></a>
<a href="http://server.com/2.avi" target="blank" class='avi'></a>
<a href="http://server.com/3.mp3" target="blank" class='mp3'></a>

Now code in individual classes as

$('.png').click(function(){
 alert('png');
});
$('.avi').click(function(){
 alert('png');
});
$('.mp3').click(function(){
 alert('mp3');
});

或者

$('a').click(function(){
   var ext=$(this).attr('href').val().substring($(this).attr('href').val().lastIndexOf('.')+1).toLowerCase();
   if(ext=='png'){
     //code for png
   } //and so on
})