Как получить значение src изображения?

Question

Я хочу получить значение src изображения, но я получаю сообщение об ошибке, что значение не определено. Что я сделал не так?

Заранее спасибо ...

$(".img_list").hide() 
 
$("#poto1").click(function(){ 
 
    $(".img_list").toggle(); 
 
}); 
 
var opts = $('li.imgt'); 
 
        
 
$("li.imgt").click(function(){ 
 
    opts.removeClass('active_l'); 
 
    var srec = $(this).addClass('active_l'); 
 
    $("#poto1").html($(this).html() + '<i class="fa fa-caret-down droping"></i>'); 
 
    alert(srec.attr('src')); 
 
    $(".img_list").hide(); 
 
});   
 
     

.photo 
 
    { 
 
     height:100px; 
 
     width: 100px; 
 
     border:1px solid #dedbdb; 
 
     border-radius:4px; 
 
     background: #fff; 
 
     margin-left: 40%; 
 
    cursor: pointer; 
 
    } 
 
    .photo img 
 
    { 
 
    position: relative; 
 
    width: 96%; 
 
    padding: 10px; 
 
    } 
 
    .img_list 
 
    { 
 
     max-height:200px; 
 
     max-width: 320px;  
 
     top: 35%; 
 
     /* border-radius: 4px; */ 
 
     border:1px solid #dedbdb; 
 
     margin-left: 20%; 
 
     margin-bottom: 15px; 
 
     position: absolute; 
 
     box-shadow: 0 8px 5px rgba(0,0,0,0.1); 
 
     z-index: 1200; 
 
     
 
    } 
 
    .for_s 
 
    { 
 
     max-height:190px; 
 
     max-width: 290px; 
 
     overflow: scroll; 
 
     overflow-x: hidden; 
 
     margin-top: -10px; 
 
    } 
 
    ul.dd_list 
 
    { 
 
     list-style: none; 
 
     margin: 0; 
 
     padding: 0; 
 

 
    } 
 
    li.imgt 
 
    { 
 
     display: inline-block; 
 
     float: left; 
 
     padding: 8px; 
 
     cursor: pointer; 
 
    } 
 
    li.imgt img 
 
    { 
 
     height: 50px; 
 
     width: 50px; 
 
    } 
 
    .active_l 
 
    { 
 
    background: #e2e2e2; 
 
     border-radius:4px; 
 
    } 
 
    .droping 
 
    { 
 
    position: relative; 
 
    bottom:20px; 
 
    right:-38px; 
 
    font-size: 16px; 
 
    color:#b9b9b9; 
 
    cursor: pointer; 
 
    } 
 

 
    /* -- dropdown ends here -- */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="photo" id="poto1"> 
 
    <img class="sel_img" alt="beh_img" src="https://upload.wikimedia.org/wikipedia/commons/7/74/Boy_and_Turtle.png"><i class="fa fa-caret-down droping"></i> 
 
</div> 
 

 
<div class="img_list padded bg-white" id="pht_list"> 
 
    <div class="for_s"> 
 
    <ul class="dd_list"> 
 
    <li class="imgt"><img src="https://upload.wikimedia.org/wikipedia/commons/7/74/Boy_and_Turtle.png" alt="img"></li><li class="imgt"><img src="https://k-3teacherresources.com/wp-content/uploads/2015/03/easter_images_hunt.jpg" alt="img"></li><li class="imgt"><img src="http://www.picgifs.com/clip-art/cartoons/pokemon/clip-art-pokemon-508076.jpg" alt="img"></li><li class="imgt"><img src="http://gdbaif.com/images/free-clipart/free-clipart-06.jpg" alt="img"></li><li class="imgt"><img src="https://s-media-cache-ak0.pinimg.com/564x/4f/f2/c3/4ff2c37d469330a1015a303cd3c87878.jpg" alt="img"></li> 
 
    </ul> 
 
    </div> 
 
    </div>

Answer 1

Просто сделай это для ЦСИ:

var src = $(".sel_img").attr('src'); // for image in class sel_img 
var src = $(".imgt").find("img").attr("src"); // for image in li class="imgt" 

$("li.imgt").click(function(){ 
        opts.removeClass('active_l'); 
        var srec = $(this).find('img'); 
        $("#poto1").html($(this).html() + '<i class="fa fa-caret-down droping"></i>'); 
        alert(srec.attr('src')); 
        $(".img_list").hide(); 
       }); 

Answer 2

Попробуйте заменить это:

var srec = $(this).addClass('active_l'); 

С этим:

var srec = $(this).find('img'); 
srec.addClass('active_l'); 

Answer 3

Попробуйте это:

Изменить

alert(srec.attr('src'));

к этому

alert($(this).find("img").attr('src'));

$(".img_list").hide() 
 
$("#poto1").click(function() { 
 

 
    $(".img_list").toggle(); 
 
}); 
 
var opts = $('li.imgt'); 
 

 
$("li.imgt").click(function() { 
 
    opts.removeClass('active_l'); 
 
    var srec = $(this).addClass('active_l'); 
 
    $("#poto1").html($(this).html() + '<i class="fa fa-caret-down droping"></i>'); 
 
    alert($(this).find("img").attr('src')); 
 
    $(".img_list").hide(); 
 
});

.photo { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid #dedbdb; 
 
    border-radius: 4px; 
 
    background: #fff; 
 
    margin-left: 40%; 
 
    cursor: pointer; 
 
} 
 
.photo img { 
 
    position: relative; 
 
    width: 96%; 
 
    padding: 10px; 
 
} 
 
.img_list { 
 
    max-height: 200px; 
 
    max-width: 320px; 
 
    top: 35%; 
 
    /* border-radius: 4px; */ 
 
    border: 1px solid #dedbdb; 
 
    margin-left: 20%; 
 
    margin-bottom: 15px; 
 
    position: absolute; 
 
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); 
 
    z-index: 1200; 
 
} 
 
.for_s { 
 
    max-height: 190px; 
 
    max-width: 290px; 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
    margin-top: -10px; 
 
} 
 
ul.dd_list { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li.imgt { 
 
    display: inline-block; 
 
    float: left; 
 
    padding: 8px; 
 
    cursor: pointer; 
 
} 
 
li.imgt img { 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
.active_l { 
 
    background: #e2e2e2; 
 
    border-radius: 4px; 
 
} 
 
.droping { 
 
    position: relative; 
 
    bottom: 20px; 
 
    right: -38px; 
 
    font-size: 16px; 
 
    color: #b9b9b9; 
 
    cursor: pointer; 
 
} 
 
/* -- dropdown ends here -- */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="photo" id="poto1"> 
 
    <img class="sel_img" alt="beh_img" src="https://upload.wikimedia.org/wikipedia/commons/7/74/Boy_and_Turtle.png"><i class="fa fa-caret-down droping"></i> 
 
</div> 
 

 
<div class="img_list padded bg-white" id="pht_list"> 
 
    <div class="for_s"> 
 
    <ul class="dd_list"> 
 
     <li class="imgt"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/7/74/Boy_and_Turtle.png" alt="img"> 
 
     </li> 
 
     <li class="imgt"> 
 
     <img src="https://k-3teacherresources.com/wp-content/uploads/2015/03/easter_images_hunt.jpg" alt="img"> 
 
     </li> 
 
     <li class="imgt"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/pokemon/clip-art-pokemon-508076.jpg" alt="img"> 
 
     </li> 
 
     <li class="imgt"> 
 
     <img src="http://gdbaif.com/images/free-clipart/free-clipart-06.jpg" alt="img"> 
 
     </li> 
 
     <li class="imgt"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/564x/4f/f2/c3/4ff2c37d469330a1015a303cd3c87878.jpg" alt="img"> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 4

Вы можете получили ГКЗ изображения, используя srec.find("img").attr('src'); вместо

srec.attr('src'); 

Answer 5

Вашего SREC не represnt изображения. сделайте это, чтобы получить изображение src.

alert($(this).find('img').attr('src')); 

$(".img_list").hide() 
 
$("#poto1").click(function() { 
 

 
    $(".img_list").toggle(); 
 
}); 
 
var opts = $('li.imgt'); 
 

 
$("li.imgt").click(function() { 
 
    opts.removeClass('active_l'); 
 
    var srec = $(this).addClass('active_l'); 
 
    $("#poto1").html($(this).html() + '<i class="fa fa-caret-down droping"></i>'); 
 
    alert($(this).find('img').attr('src')); 
 
    $(".img_list").hide(); 
 
});

.photo { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px solid #dedbdb; 
 
    border-radius: 4px; 
 
    background: #fff; 
 
    margin-left: 40%; 
 
    cursor: pointer; 
 
} 
 
.photo img { 
 
    position: relative; 
 
    width: 96%; 
 
    padding: 10px; 
 
} 
 
.img_list { 
 
    max-height: 200px; 
 
    max-width: 320px; 
 
    top: 35%; 
 
    /* border-radius: 4px; */ 
 
    border: 1px solid #dedbdb; 
 
    margin-left: 20%; 
 
    margin-bottom: 15px; 
 
    position: absolute; 
 
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); 
 
    z-index: 1200; 
 
} 
 
.for_s { 
 
    max-height: 190px; 
 
    max-width: 290px; 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
    margin-top: -10px; 
 
} 
 
ul.dd_list { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li.imgt { 
 
    display: inline-block; 
 
    float: left; 
 
    padding: 8px; 
 
    cursor: pointer; 
 
} 
 
li.imgt img { 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
.active_l { 
 
    background: #e2e2e2; 
 
    border-radius: 4px; 
 
} 
 
.droping { 
 
    position: relative; 
 
    bottom: 20px; 
 
    right: -38px; 
 
    font-size: 16px; 
 
    color: #b9b9b9; 
 
    cursor: pointer; 
 
} 
 
/* -- dropdown ends here -- */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="photo" id="poto1"> 
 
    <img class="sel_img" alt="beh_img" src="https://upload.wikimedia.org/wikipedia/commons/7/74/Boy_and_Turtle.png"><i class="fa fa-caret-down droping"></i> 
 
</div> 
 

 
<div class="img_list padded bg-white" id="pht_list"> 
 
    <div class="for_s"> 
 
    <ul class="dd_list"> 
 
     <li class="imgt"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/7/74/Boy_and_Turtle.png" alt="img"> 
 
     </li> 
 
     <li class="imgt"> 
 
     <img src="https://k-3teacherresources.com/wp-content/uploads/2015/03/easter_images_hunt.jpg" alt="img"> 
 
     </li> 
 
     <li class="imgt"> 
 
     <img src="http://www.picgifs.com/clip-art/cartoons/pokemon/clip-art-pokemon-508076.jpg" alt="img"> 
 
     </li> 
 
     <li class="imgt"> 
 
     <img src="http://gdbaif.com/images/free-clipart/free-clipart-06.jpg" alt="img"> 
 
     </li> 
 
     <li class="imgt"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/564x/4f/f2/c3/4ff2c37d469330a1015a303cd3c87878.jpg" alt="img"> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>