从PHP代码加载图像，然后单击时更改主页上的图像 - Load images from PHP code then change an image on the main page when clicked

我正在努力找到一种方法来完成这项工作。

我有这个<div id="profile-picture-selection"></div>，当页面加载时它是空的。

我有一个基本的"注册"表单和一个图像选择标签：

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

当我单击图像并运行 jQuery 事件时

$("#Choose-Profile-Picture").on("click",function(){
  $.get("load_more.php", function(data){
    $("#profile-picture-selection").html(data);
  }); 
});

我调用我的 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
?>

这就是我遇到问题的地方。

我

有这个来注册我正在点击我刚刚填充图像的div：

$(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'));
     }
});

如何获取我单击以在主页上更新的图像？

我这里有一个真实的例子。

问题是单击事件没有正确到达您创建的 DOM 元素。
而不是做那个if，jQuery有一个（我不知道名称是否正确）事件委托用于这种情况。

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

要记住的诀窍是：

选择一个在 DOM.ready 时可用的 DOM 元素（#profile 图片选择）。
声明哪个事件（"点击"）。
定义一个选择器以查看我们之前选择的元素内部以委派事件。（在您的示例中"#b-tag"）
e.preventDefault（）以避免网站中的锚导航。

我尝试使用您的网站，它似乎到达了他们。
您应该考虑的另一件事是创建/拥有具有相同 ID 的多个元素。这是一种不好的做法，#b-tag应该是.b-tag或任何你想要的。

对于制作，您可以单击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'));
     }
});

由

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

小提琴：https://jsfiddle.net/93vk5kbt/2/

$(document).ready(function() {
    // hide div when page loads.
    $('#profile-picture-selection').hide();
    // when 'like a sir' image is clicked to choose a profile picture, 
    // go to 'load_more.php' and download 10 images and display them in the empty div
    $("#Choose-Profile-Picture").on("click",function(){
     
    });
    
	 $(".b-profpic").click(function(){
        var srcImage = $(this).closest("a").find("img").attr("src");
        $(".user").attr("src",srcImage);
    })
  //when about is clicked show about and hide other stuff
  $(function(){
  $("#Choose-Profile-Picture").click(function(e){
  e.stopPropagation();
  $("#signup").toggle();
  $("#profile-picture-selection").toggle();
  e.preventDefault(); // Stop navigation
  }); // function
  $("body").click(function(e){
  $("#profile-picture-selection").hide();
  $("#signup").show();
  }); // body
  }); // function
}); // end document.ready

html, body{
 padding: 0;
 margin: 0;
 height: 100%;
 width: 100%;
 background-color: #f1f1f1;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
#signup{
 border-style: outset;
 width: 400px;
 margin-left: auto;
 margin-right: auto;
 top: 50px;
 position: relative;
}
#profile-picture-selection{
 border-style: outset;
 width: 800px;
 margin-left: auto;
 margin-right: auto;
 top: 50px;
 position: relative;
 text-align: center;
}
#Choose-Profile-Picture-Q{
 opacity: 0;
 transition: 1s;
}
table{
 margin-left: auto;
 margin-right: auto;
 margin-top: 30px;
}
.user{
 width: 200px;
 height: 200px;
 border-radius: 50%;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
 -webkit-transition: all 0.5s ease-out 0s;
 -moz-transition: all 0.5s ease-out 0s;
 -ms-transition: all 0.5s ease-out 0s;
 -o-transition: all 0.5s ease-out 0s;
 transition: all 0.5s ease-out 0s;
}
.user:hover{
 opacity: 0.6;
 background: rgba(0, 0, 0, 0.5);
 -webkit-opacity: 0.20;
 -moz-opacity: 0.20;
 opacity: 0.20;
}
#Choose-Profile-Picture{
 position: relative;
 display: inline-block;
}
#Choose-Profile-Picture #Choose-Profile-Picture-Q{
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.5);
 text-align: center;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: 0;
 color: #fff;
 opacity:0;
 transition:1s;
}
#Choose-Profile-Picture:hover #Choose-Profile-Picture-Q{
 padding-top: 95px;
 opacity:1;
}
.choose-user{
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
 -webkit-transition: all 0.5s ease-out 0s;
 -moz-transition: all 0.5s ease-out 0s;
 -ms-transition: all 0.5s ease-out 0s;
 -o-transition: all 0.5s ease-out 0s;
 transition: all 0.5s ease-out 0s;
}
.choose-user:hover{
 opacity: 0.6;
 background: rgba(0, 0, 0, 0.5);
 -webkit-opacity: 0.20;
 -moz-opacity: 0.20;
 opacity: 0.20;
}
#b-tag{
 position: relative;
 display: inline-block;
}
#b-tag #b-profpic{
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.5);
 text-align: center;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: 0;
 color: #fff;
 opacity:0;
 transition:1s;
}
#b-tag:hover #b-profpic{
 padding-top: 70px;
 opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="signup" style="">
  <table>
   <tbody><tr>
    <th>
     <form method="post" action="addrecord.php">
      <input type="text" value="Username" name="username" id="username"><br><br>
      <input type="text" value="Fullname" name="fullname" id="fullname"><br><br>
      <input type="text" value="Email Address" name="email" id="email"> <br><br>
      <input type="text" value="Password" name="password" id="password"><br><br>
      <input type="submit" value="The Go Button">
     </form>
    </th>
    <th>
     <a href="#" id="Choose-Profile-Picture">
      <span id="Choose-Profile-Picture-Q">Choose Profile Picture</span>
      <img src="http://mrpavle.duckdns.org/images/sir.png" class="user">
     </a>
    </th>
   </tr>
  </tbody></table>
 </div>
 
 <div id="profile-picture-selection" style="display: block;"><a href="#" id="b-tag">
          <span id="b-profpic" class="b-profpic">Choose this?</span>
          <img src="http://mrpavle.duckdns.org/images/faces/NOPE.png" class="choose-user">
          </a><a href="#" id="b-tag">
          <span id="b-profpic" class="b-profpic">Choose this?</span>
          <img src="http://mrpavle.duckdns.org/images/faces/accidentally_open_internet_explorer.png" class="choose-user">
          </a><a href="#" id="b-tag">
          <span id="b-profpic" class="b-profpic">Choose this?</span>
          <img src="http://mrpavle.duckdns.org/images/faces/actually.png" class="choose-user">
          </a><a href="#" id="b-tag">
          <span id="b-profpic" class="b-profpic">Choose this?</span>
          <img src="http://mrpavle.duckdns.org/images/faces/aint_that_some_shit.png" class="choose-user">
          </a>><a href="#" id="b-tag">
          <span id="b-profpic" class="b-profpic">Choose this?</span>
          <img src="http://mrpavle.duckdns.org/images/faces/alien.png" class="choose-user">
          </a><a href="#" id="b-tag">
          <span id="b-profpic" class="b-profpic">Choose this?</span>
          <img src="http://mrpavle.duckdns.org/images/faces/all_the_things_fuu.png" class="choose-user">
          </a><a href="#" id="b-tag">
          <span id="b-profpic" class="b-profpic">Choose this?</span>
          <img src="http://mrpavle.duckdns.org/images/faces/all_the_things_sad.png" class="choose-user">
          </a><a href="#" id="b-tag">
          <span id="b-profpic" class="b-profpic">Choose this?</span>
          <img src="http://mrpavle.duckdns.org/images/faces/angry_bang.png" class="choose-user">
          </a><a href="#" id="b-tag">
          <span id="b-profpic" class="b-profpic">Choose this?</span>
          <img src="http://mrpavle.duckdns.org/images/faces/angry_dark_stare.png" class="choose-user">
          </a><a href="#" id="b-tag">
          <span id="b-profpic" class="b-profpic">Choose this?</span>
          <img src="http://mrpavle.duckdns.org/images/faces/angry_head_shake.png" class="choose-user">
          </a></div>