Question

我正在制作图库应用程序。其中我通过从数据库中提取图像路径并将此路径动态附加到div中，将文件夹中的一些图像显示到 index.html 页面。我的图片文件夹名称是 tutor_images

以下是我附加图片的 index.html 代码

<div id="allTutors" class="slider filtering scrollpoint sp-effect5" >
<div class="lists">
</div>
</div>

现在这个 js代码将成像路径附加到div.its完美运行

 $(document).ready(function(){
    $.ajax({
        url:'php/all-tutors.php',
        type: 'GET',
        success:function(data){
            var result = $.parseJSON(data);
            $.each(result, function(key, value){
                $.each(value, function(k,v){
                    if (k === 'image_path') {
                        var gh = $("<img id='tutorImg' src="+v.slice(3)+">");
                        $('#allTutors .lists:first')
                        .clone()
                        .append("<img id='tutorImg' src="+v.slice(3)+"><button id='viewTutor' class='btn btn-primary'>View Profile</button>")
                        .appendTo($('#allTutors')); 
                    }
                    if (k === 'name') {
                        $('#allTutors .lists:first')
                        .clone()
                        .append("<h4 id='tutorList'>"+v+"</h4><br/>")
                        .appendTo($('#allTutors'));
                    }

                });
            });
        }
    })

    });
});

现在，我的问题是：

我希望当我点击图片旁边的特定按钮时，我得到图片的 src 。

请帮帮我。

Answer 1

由于动态内容，您需要收听#allTutors

$('#allTutors').on('click','button',function(){
  img = $(this).prev('img');
  if(img.length > 0){
    alert(img.attr('src'));
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allTutors">
  <img src="image/src.jpg" alt="image" />
  <button>get src</button>
</div>

Answer 2

我通常应用的另一种解决方法是在生成每个div时，给它一个索引。

例如

 <div id="allTutors">
   <img id = 'tutorImage1' src="image/src.jpg" alt="image" />
   <button onclick = 'getTheSrcForThisOne(1)'>get src</button>
 </div>

 <script>
      function getTheSrcForThisOne(which){
         console.log(getElementById("tutorImage"+which).src);
      }

 </script>

只需在添加src的同时将id添加到元素中。然后将id添加到按钮中。简单，让您与每个人互动，并知道正在采取行动。

修改

更好的是，让图像成为一个按钮。

 <div id="allTutors">
   <img src="image/src.jpg" alt="image" onclick = 'getMySRC(this)'/>
 </div>

 <script>
      function getMySRC(forWho){
         console.log(forWho.src);
      }
 </script>

Answer 3

您可以通过替换src属性来解决问题（我不建议）：

<img id="yourImageId" src="assets/img/image01.jpg" alt="..." />
<button id="yourButtonId">NEXT</button>

<script src="jquery.js></script>
<script>
$( "#yourButtonId" ).click(function() {
   #( "#yourImageId" ).attr("src").replace("image01.jpg", "image02.jpg");
});
<script>

或者您可以使用“display：none;”在html中编写所有图像列表每次单击下一步，您都会更改实际图片以显示无，而下一图片则显示块。

如何获取动态创建的图像src

3 个答案:

修改