Question

我知道这看起来很简单，但是当我点击图片时，我很难获得source属性的值。单击任何图像时出现此错误：

$不是函数

我认为它可能与jQuery对象的上下文有关。任何想法都会很棒。

＆＃13;

$(function () {
        ListData()
        .then(function(data){
            var imageHtml = [];
            //data is an array or image url's
            data.map(function(items, index){
                imageHtml.push('<img class="img-circle" id="user'+items['UserId']+'" src="'+items['PictureUrl']+ '"/>');                
            });

           var imagesString = imageHtml.join().replace(/,/g,"");
           
           //load images onto the page
           $('#gallery').append(imagesString);        
          // grab Jquery Object of all the images loaded to th epage with class img-circle       
           var Allimages = $(".img-circle");          
           Allimages.on('click',function(){
               var imageUrl= $(this).attr('id')
               
               })      
        
        })
              
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">

</div>

＆＃13;

Answer 1

此代码在SO上运行正常（参见下面的示例）。

在您的页面上，确保在运行代码之前加载jQuery 。您可以通过在<head>中加载jQuery并将代码放在正文的底部，或者将代码包装在$(document).ready()中来完成此操作，如下所示：

$(document).ready(function() { // your code });

您的代码（在这里工作正常）：

$(function(){ var Allimages = $(".img-circle"); Allimages.click(function(){ var imageUrl= $(this).attr('src') console.log(imageUrl); }) })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="gallery"> <img class="img-circle" src="url1" style="top: 305px; left: 56px;"/> <img class="img-circle" src="url2" style="top: 152px; left: 81px;"/> <img class="img-circle" src="url3" style="top: 331px; left: 569px;"/> <img class="img-circle" src="url4" style="top: 173px; left: 343px;"/> <img class="img-circle" src="url5" style="top: 453px; left: 420px;"/> </div>

如何获得jQuery中单击图像的属性

1 个答案: