gpt4 book ai didi

javascript - PHP创建动态链接,如何在点击时调用Jquery上的右侧div来执行AJAX调用

转载 作者:行者123 更新时间:2023-11-28 08:06:31 26 4
gpt4 key购买 nike

我为实验室内部研究创建了一个非常简单的“图片库”。

我有一个包含文件名(超过 1000 个)的数组,我可以从中调用每个文件名并将其设置到一个表中,以 5 行图像乘 5 列图像的方式显示。

初始链接是缩略图大小的图像,它应该是指向同一图像的低分辨率版本的链接,我将其放在具有相同文件名的名为 lowres 的目录中。

我创建了一个带有文件名的隐藏输入字段,试图调用输入字段的值并将其用作链接的实际值。

如何使图像链接正常工作,以便我可以使用 AJAX 调用来购买低分辨率图像?

这是 PHP 代码:

====================

    $array =     array("IMG_3944.jpg","IMG_3946.jpg","IMG_3947.jpg","IMG_3948.jpg","IMG_3951.jpg","IMG_3954.jpg","IMG_3955.jpg","IMG_3957.jpg","IMG_3958.jpg","IMG_3959.jpg","IMG_3960.jpg","IMG_3962.jpg","IMG_3963.jpg","IMG_3964.jpg","IMG_3965.jpg","IMG_3967.jpg","IMG_3971.jpg","IMG_3973.jpg","IMG_3980.jpg","IMG_3981.jpg","IMG_3983.jpg","IMG_3985.jpg","IMG_3990.jpg","IMG_3993.jpg","IMG_3996.jpg","IMG_4002.jpg","IMG_4005.jpg");
$l = count($array);
$z = $l/25;
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/index.css">
</head>
<body>
<div class="mainContainer">
<div id="menuPages">
<?php
/*================= Page numbers =====================*/
echo '<table><tr>';
for($w = 1; $w < $z; $w++){
echo '<td><div class="page'.$w.'">'.$w.'</div></td><td>';
if($w == 13){
echo '</tr><tr>';
continue;
};
};
echo '</tr></table>';
?>
</div>
<div class="tableContainer">
<?php
$x = 0;
$y = 1;
$cut = 4;
$nxtpg = 24;
echo "<div id='page".$y."'><table><tr>";
for($x = 0; $x <= $l; $x++){
if($x <= $cut){
echo "<td><input type='hidden' id='hiddenInput' value='".$array[$x]."'><img id='image' name='".$array[$x]."' src='thumbs/".$array[$x]."' height='80px'></td>";
if($x == $cut){
echo "</tr><tr>";
$cut = $cut + 5;
continue;
};
if($cut == $nxtpg){
$y = $y+1;
echo "</table></div><div id='page".$y."'><table><tr>";
$nxtpg = $nxtpg +25;
};
};
};

====================jQuery

在这里,我尝试用点击结果“提醒我”。

 $(document).ready(function(){
$("#image").click(function(){
var cCode = $("#hiddenInput").val(this);
alert(cCode);
});
});

最佳答案

更新您的代码。你不应该将相同的 id 应用于 html 元素。另外,要获取低分辨率图像,您不需要触发 ajax 请求。由于您已经在 J​​S 函数中获取了名称,因此您可以创建一个 div 容器来显示图像。

   ...............
<div class="tableContainer">
<?php
$x = 0;
$y = 1;
$cut = 4;
$nxtpg = 24;
echo "<div id='page".$y."'><table><tr>";
for($x = 0; $x <= $l; $x++){
if($x <= $cut){
echo "<td><img class='image' name='".$array[$x]."' src='thumbs/".$array[$x]."' height='80px'></td>";
......

Javascript 代码应该是这样的

$(document).ready(function(){
$(".image").click(function(){
alert(this.attr('name')); //as image name
});
});

关于javascript - PHP创建动态链接,如何在点击时调用Jquery上的右侧div来执行AJAX调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24740379/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com