1

我想使用 javascript onClick() 函数将包含 img src 的变量传递到另一个页面。我怎样才能通过id或名称标签来做到这一点。这就是我要找的东西：

通过 onclick() 从 home.html获取img srclocation.href = '/image';变量并使用我的 function()中的 a 传递给 & document.write() 到 img.html

提前致谢。

功能

<script type="text/javascript">
function img(id)
{
    this.id = id;
    var i = document.getElementById("image").src;
    var j = new Image();
    j.src = i;
    document.body.appendChild(j);
    document.write('"<img src="' + j + '"' + '/>');
}

</script>

主页.html

<div class="container">

    <ul class="thumbnails">
    <li class="span3">
    <img src="../img/google-app-engine.gif" class="thumbnail" id="abc" name="a">
    <img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
    </li>
    <li class="span3">
    <img src="../img/google-app-engine.gif" class="thumbnail" id="xyz" name="b">
    <img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
    </li>
    <li class="span3">
    <img src="../img/google-app-engine.gif" class="thumbnail" id="zzz" name="c">
    <img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
    </li>
    </ul>

</div>

我想将 img src 值传递给的页面是

img.html

<div class="container">
    <div id="image" name="image">
    <img src="" id="image" name="image"/>
    </div>
</div>
4

3 回答 3

5

老学校的方式

我不太清楚，但我认为 ie6 也支持这一点；

我只添加了必要的代码

主页.html

<html>
<head>
<title>thumbs</title>
<script>
function sendimg(a){
 window.location.href='b.html#id='+a.id+'&src='+a.src;
}
</script>
</head>
<body>
<img src="imgs/img1.jpg" id="img1" onClick="sendimg(this);">
<img src="imgs/img2.jpg" id="img2" onClick="sendimg(this);">
<img src="imgs/img3.jpg" id="img3" onClick="sendimg(this);">
</body>
</html>

img.html

<html>
<head>
<title>img</title>
<script>
function getimg(){
 var a=window.location.href.split('#')[1].split('&'),
 id=a[0].split('=')[1],
 src=a[1].split('=')[1],
 img=document.images[0];
 img.id=id;
 img.src=src;
}
</script>
</head>
<body onLoad="getimg()">
<img src="ablankimage.gif">
</body>
</html>

现在给我一些时间，我写现代的方式。

现代方式

..所以这个例子支持较少，但可以做更多。我还以不同的方式写了一些类似的东西，并添加了一些特殊的现代功能，当你说你是 javascript 新手时，你可以照顾。

主页.html

<html>
<head>
<title>thumbs</title>
<script>
(function(W){
 function init(){
  W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
 }
 function sendimg(e){
  var a=e.target;
  if(a.parentNode.id=='thumbs'){
   W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
   W.location.href="img.html";
  }
 }
 W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<div id="thumbs">
<img src="imgs/img1.jpg" id="img1">
<img src="imgs/img2.jpg" id="img2">
<img src="imgs/img3.jpg" id="img3">
</div>
</body>
</html>

img.html

<html>
<head>
<title>img</title>
<script>
window.onload=function(){
 var img=document.createElement('img');
 var info=JSON.parse(window.localStorage['imginfo']);
 delete window.localStorage['imginfo'];
 img.src=info.src;
 img.id=info.id;
 document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>

如果您不想让我解释更多内容，请询问；）

于 2013-08-21T19:20:45.403 回答
0

有一种方法可以使这种现代方式在数据库的一个表中的所有图像上行走？我曾经尝试过，但它只用于第一个图像。然后我尝试将这种现代方式放在 php 页面中。

这是我的php页面：

*home.php:

              <?php
	$bdd = new PDO('mysql:host=127.0.0.1;dbname=imagetest', 'root', '');
	
?>
<html>
<head>
<title>thumbs</title>

</head>
<body>
	<div >
<?php
	$req = $bdd->query("SELECT * FROM images ORDER BY idimage DESC  ");

	
			while ($donnees = $req->fetch()): 
				?>
				<div id="thumbs"><?php echo ('<img  style="width:180px;height:180px;margin-left:40%;" src = "'.$donnees['lien'].'">');?> </div>


					<script>
						(function(W){
						 function init(){
						  W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
						 }
						 function sendimg(e){
						  var a=e.target;
						  if(a.parentNode.id=='thumbs'){
						   W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
						   W.location.href="img.php";
						  }
						 }
						 W.addEventListener('load',init,false)
						})(window)
						</script>
				
		<?php endwhile; ?>
					
				</div>	
<body>
</body>
</html>

*img.php

<!DOCTYPE html>
<html>
<head>
	<title>img</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width-device-width, initial-scale=1.0"/>
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="./style.css"/>
	<link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<style type="text/css">
	img{height: 300px;width: 400px;}
</style>
<script>
window.onload=function(){
 var img=document.createElement('img');
 var info=JSON.parse(window.localStorage['imginfo']);
 delete window.localStorage['imginfo'];
 img.src=info.src;
 img.id=info.id;
 document.body.appendChild(img);
}
</script>

</head>
<body>
</body>
</html>

于 2020-06-18T12:52:55.080 回答
-5

这很容易用 Ajax + PHP + jQuery 完成

查询

var link = $("img").attr("src");

    $.ajax{
       url: "img.php",
       type: "POST",
       data: {"img":link},
       success: function(e){
        // Whatever you want
       }
    }

PHP

       <?php
     if (isset($_POST['img'])){
     $link = $_POST['img']
    }

   // Whatever you want to do with the variable $link
    ?>

不知道能不能解决你的问题，希望能解决。

于 2013-08-21T18:45:46.577 回答