我有一个简单的HTML页面,其中包含一个包含多行的表。每行都有一个单元格,其中包含指向另一个名为" photos.html"的HTML页面的超链接。目前" photos.html"页面显示从主页面链接到的每个图像。我想改变它,以便如果用户点击主页上的超链接," photos.html"页面已打开,但仅显示与特定行相关的图像。
以下是我想要完成的一个简化示例:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="photos.html" TARGET="_blank">Link 1</A> <!-- Open "photos.html" with Link 1 images only -->
<A HREF="photos.html" TARGET="_blank">Link 2</A> <!-- Open "photos.html" with Link 2 images only -->
</BODY>
</HTML>
HTML中是否可以这样做?
答案 0 :(得分:0)
使用Jquery
$("a").click(function(event){
event.preventDefault();
var url=$(this).attr("href");
$.ajax({
url: url,
success: function(data) {
$("img", data).each(function() {
alert( $(this).attr("src") );
});
}
});
});
更新
</html>
<head>
<script src="code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
$("a").click(function(event){
var anchor=$(this);
event.preventDefault();
var url=$(this).attr("href");
$.ajax({
url: url,
success: function(data) {
$("img", data).each(function() {
//var img='<img id="theImg" src="'+($(this).attr("src"))+'" />';
anchor.next("div.images").append($(this));
});
}
});
});
});
</script>
</head>
<body>
<A HREF="photos.html" TARGET="_blank">Link 1</A> <!-- Open "photos.html" with Link 1 images only -->
<div class="images">
</div>
<A HREF="photos.html" TARGET="_blank">Link 2</A> <!-- Open "photos.html" with Link 2 images only -->
<div class="images">
</div>
</body>
</html>
data
对象包含网页的HTML代码。
在此行alert( $(this).attr("src") );
中,您可以访问所有元素。
例如:获取所有DIV
代码
$("div", data).each(function() {
alert( $(this).attr("id") );
});