页面想要实现的功能是,点击某个图片后,这个图片加蓝色边框(其余图片边框去掉),然后点击“确定”按钮时弹出被选中图片的“src”属性值。代码如下:
<html>
<head>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
                            /*页面加载完,让第一张图片默认选中*/
$("#custom img:first").addClass("selected");

                            /*如果选中某图片,为其添加边框样式*/
$("img").click(function() {
$("img").removeClass("selected");
$(this).addClass("selected");
});                           /*点击“确定”按钮后弹出被选中图片的src值*/
                           $("#customSelect").click(function() {
                                   ???????????????                           });  })
</script>

<style type="text/css">
li {
list-style-type:none;
} #custom {
width:100%; 
height:120px; 
border:2px solid gray;
}

#custom li {
width:100px;
float:left;
margin:10px 20px 5px;
text-align:center;
}

<!-- 选中后的样式 -->
                  .selected {
border:3px solid blue;
}
</style>
</head><body>
<div id="custom">
<li><img src="/images/1.jpg" width="100"></img>
<span>第1个</span></span></li>
<li><img src="/images/2.jpg" width="100"></img>
<span>第2个</span></span></li>
<li><img src="/images/3.jpg" width="100"></img>
<span>第3个</span></span></li>

<div>
<button id="customSelect">确定</button>
</div>
</div>
</body>
</html>
现在问题就是,我不知道怎么能获取到已经被选中的图片,就是在代码中???的位置不知道该怎么写

解决方案 »

  1.   

    $(this).attr("src");
    这样 ?
    $("img[class='selected']").attr("src");
      

  2.   

    <script type="text/javascript" language="javascript">
    $(function(){
      /*页面加载完,让第一张图片默认选中*/
    $("#custom img:first").addClass("selected");
    $("#customSelect").setAttribute("toAlert",$("#custom img:first").getAttribute("src"));
      /*如果选中某图片,为其添加边框样式*/
    $("img").click(function() {
    $("img").removeClass("selected");
    $(this).addClass("selected");
    $("#customSelect").setAttribute("toAlert",$(this).getAttribute("src"));});  /*点击“确定”按钮后弹出被选中图片的src值*/
      $("#customSelect").click(function() {
      alert($(this).getAttibute("toAlert")); });  })
    </script>