页面想要实现的功能是,点击某个图片后,这个图片加蓝色边框(其余图片边框去掉),然后点击“确定”按钮时弹出被选中图片的“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>
现在问题就是,我不知道怎么能获取到已经被选中的图片,就是在代码中???的位置不知道该怎么写
<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>
现在问题就是,我不知道怎么能获取到已经被选中的图片,就是在代码中???的位置不知道该怎么写
这样 ?
$("img[class='selected']").attr("src");
$(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>