Javascript 从PHP代码加载图像，然后在单击时更改主页上的图像

我正在努力找到一种方法来完成这件事

我有一个

，当页面加载时它是空的

我有一个基本的“注册”表格和一个图像选择标签：

<a id="Choose-Profile-Picture" href="#">
 <span id="Choose-Profile-Picture-Q">Choose Profile Picture</span>
 <img class="user" src="images/sir.png">
</a>

我调用我的PHP代码load_more.PHP来显示十幅图像

<?php

  $images = glob('images/faces/*.{png}', GLOB_BRACE);
  $counted += 10;
  $i = 0;

  foreach ($images as $image) {
    if($i == $counted) {
      return;
    } //end if

    //shows images in console
    echo("<script>console.log('PHP: ".$image."');</script>");

    $i++;
    echo "<a id='b-tag' href='#'>
          <span id='b-profpic'>Choose this?</span>
          <img class='choose-user' src='$image'>
          </a>";
  } //end foreach

?>

我怎样才能得到我点击后在主页上更新的图像

---

我有一个真实的例子。

对于make，您可以单击

img的
src
。ID是唯一的。用类替换所有id

请尝试更换

$(function() {
 $("#profile-picture-selection").click(function(e) {
     if (e.target.id == "profile-picture-selection" || $(e.target).parents("#profile-picture-selection").size()) { 
         alert("Inside div");

         //this changes the image that i selected right ?
         //$(".user").attr("src",$('.choose-user').attr('src'));

     }
});

借

小提琴：


$（文档）.ready（函数（）{
//页面加载时隐藏div。
$（“#配置文件图片选择”）.hide（）；
//单击“like a sir”图像以选择个人资料图片时，
//转到“load_more.php”，下载10个图像并在空div中显示它们
$（“#选择配置文件图片”）。在（“单击”，函数（）{
});
$（“.b-profpic”）。单击（函数（）{
var srcImage=$（this）.closest（“a”）.find（“img”）.attr（“src”）；
$（“.user”）.attr（“src”，srcImage）；
})
//单击“关于”时，显示关于和隐藏其他内容
$（函数（）{
$（“#选择配置文件图片”）。单击（功能（e）{
e、 停止传播（）；
$（“#注册”）.toggle（）；
$（“#配置文件图片选择”）.toggle（）；
e、 preventDefault（）；//停止导航
})；//函数
$（“正文”）。单击（功能（e）{
$（“#配置文件图片选择”）.hide（）；
$（“#注册”）.show（）；
})；//正文
})；//函数
}); // 结束文档。准备就绪
html，正文{
填充：0；
保证金：0；
身高：100%；
宽度：100%；
背景色：#f1f1；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
#报名{
边界样式：开始；
宽度：400px；
左边距：自动；
右边距：自动；
顶部：50px；
位置：相对位置；
}
#配置文件图片选择{
边界样式：开始；
宽度：800px；
左边距：自动；
右边距：自动；
顶部：50px；
位置：相对位置；
文本对齐：居中；
}
#选择-Profile-Picture-Q{
不透明度：0；
过渡：1s；
}
桌子{
左边距：自动；
右边距：自动；
边缘顶部：30px；
}
.用户{
宽度：200px；
高度：200px；
边界半径：50%；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
-webkit过渡：所有0.5都减少0；
-moz转换：所有0.5秒都会减少0秒；
-ms转换：所有0.5秒都减少0秒；
-o型过渡：所有0.5秒都减少0秒；
过渡：所有0.5s缓解0；
}
.用户：悬停{
不透明度：0.6；
背景：rgba（0,0,0,0.5）；
-webkit不透明度：0.20；
-moz不透明度：0.20；
不透明度：0.20；
}
#选择个人资料图片{
位置：相对位置；
显示：内联块；
}
#选择个人资料图片#选择-Profile-Picture-Q{
边界半径：50%；
背景：rgba（0,0,0,0.5）；
文本对齐：居中；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：0；
颜色：#fff；
不透明度：0；
过渡：1s；
}
#选择个人资料图片：悬停#选择-Profile-Picture-Q{
填充顶部：95px；
不透明度：1；
}
.选择用户{
宽度：150px；
高度：150像素；
边界半径：50%；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
-webkit过渡：所有0.5都减少0；
-moz转换：所有0.5秒都会减少0秒；
-ms转换：所有0.5秒都减少0秒；
-o型过渡：所有0.5秒都减少0秒；
过渡：所有0.5s缓解0；
}
。选择用户：悬停{
不透明度：0.6；
背景：rgba（0,0,0,0.5）；
-webkit不透明度：0.20；
-moz不透明度：0.20；
不透明度：0.20；
}
#b标签{
位置：相对位置；
显示：内联块；
}
#b-tag#b-profpic{
边界半径：50%；
背景：rgba（0,0,0,0.5）；
文本对齐：居中；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
保证金：0；
颜色：#fff；
不透明度：0；
过渡：1s；
}
#b标签：悬停#b-profpic{
填充顶部：70px；
不透明度：1；
}













>
对于make，您可以单击
img的
src
。ID是唯一的。用类替换所有id

请尝试更换

$(function() {
 $("#profile-picture-selection").click(function(e) {
     if (e.target.id == "profile-picture-selection" || $(e.target).parents("#profile-picture-selection").size()) { 
         alert("Inside div");

         //this changes the image that i selected right ?
         //$(".user").attr("src",$('.choose-user').attr('src'));

     }
});

借

小提琴：


$（文档）.ready（函数（）{
//页面加载时隐藏div。
$（“#配置文件图片选择”）.hide（）；
//单击“like a sir”图像以选择个人资料图片时，
//转到“load_more.php”，下载10个图像并在空div中显示它们
$（“#选择配置文件图片”）。在（“单击”，函数（）{
});
$（“.b-profpic”）。单击（函数（）{
var srcImage=$（this）.closest（“a”）.find（“img”）.attr（“src”）；
$（“.user”）.attr（“src”，srcImage）；
})
//单击“关于”时，显示关于和隐藏其他内容
$（函数（）{
$（“#选择配置文件图片”）。单击（功能（e）{
e、 停止传播（）；
$（“#注册”）.toggle（）；
$（“#配置文件图片选择”）.toggle（）；
e、 preventDefault（）；//停止导航
})；//函数
$（“正文”）。单击（功能（e）{
$（“#配置文件图片选择”）.hide（）；
$（“#注册”）.show（）；
})；//正文
})；//函数
}); // 结束文档。准备就绪
html，正文{
填充：0；
保证金：0；
身高：100%；
宽度：100%；
背景色：#f1f1；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
#报名{
边界样式：开始；
宽度：400px；
左边距：自动；
右边距：自动；
顶部：50px；
位置：相对位置；
}
#配置文件图片选择{
边界样式：开始；
宽度：800px；
左边距：自动；
右边距：自动；
顶部：50px；
位置：相对位置；
文本对齐：居中；
}
#选择-Profile-Picture-Q{
不透明度：0；
过渡：1s；
}
桌子{
左边距：自动；
右边距：自动；
边缘顶部：30px；
}
.用户{
宽度：200px；
高度：200px；
边界半径：50%；
背景重复：无重复；
背景位置：中心；
背影
$(function() {
 $("#profile-picture-selection").click(function(e) {
     if (e.target.id == "profile-picture-selection" || $(e.target).parents("#profile-picture-selection").size()) { 
         alert("Inside div");

         //this changes the image that i selected right ?
         //$(".user").attr("src",$('.choose-user').attr('src'));

     }
});

$(document).ready(function() {
    $(".b-profpic").click(function(){
        var srcImage = $(this).closest("a").find("img").attr("src");
        $(".user").attr("src",srcImage);
    })
})

$("#profile-picture-selection").on('click','#b-tag',function(e) { //whatever })