1

javascript onClick() 関数を使用して、img src を保持する変数を別のページに渡したいです。IDまたは名前タグのいずれかでそれを行うにはどうすればよいですか。ここに私が探しているものがあります:

home.html から onclick() でimg src変数を取得location.href = '/image';し、関数 () で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>

home.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 でもサポートされていると思います。

必要なコードのみを追加しました

home.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の初心者だと言ったように、あなたが世話をすることができるいくつかの特別な最新機能を追加しました.

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

データベースの 1 つのテーブルにあるすべての画像をこの Morden の方法で実行する方法はありますか?私はそれを試していましたが、最初の画像でのみ使用されています。

ここに私の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 で簡単に実行できます。

Jクエリ

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 に答える