ajax - 查看不同的内容

Question

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

Answer 1

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

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

Answer 2

这个怎么样：

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