如何获得图像的src值？

时间：2016-09-19 03:53:53

标签： jquery html css

我想获取图像的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>

5 个答案:

答案 0 :(得分：0)

为src执行此操作：

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

答案 1 :(得分：0)

尝试替换它：

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

有了这个：

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

答案 2 :(得分：0)

试试这个：

更改

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>

答案 3 :(得分：0)

你可以使用srec.find("img").attr('src');获得src图像 而不是

srec.attr('src');

答案 4 :(得分：0)

你的srec不会重复图片。这样做是为了获得图像src。

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

＆＃13;
＆＃13; 
$(".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();
});
＆＃13; 
.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 -- */
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题