jquery 点击获取span的值

来源：互联网发布：淘宝怎么升级快编辑：程序博客网时间：2024/06/05 18:34

直接代码

html

<span title="普通地图" id='ordinaryMap' class='selectMap' style='display:none;' onclick="javascript:selectMap(this.id);"><span class='ordinaryMap'><span class='describeSpan'></span><span class='describeSelectMap'>地图</span></span></span><span title="卫星地图" id='satelliteMap' class='selectMap' onclick="javascript:selectMap(this.id);"><span class='satelliteMap'><span class='describeSpan'></span><span class='describeSelectMap'>卫星</span></span></span>

function selectMap(id){var selectVal = $.trim($('#'+id).children().last().text());if(selectVal=="卫星"){$('#satelliteMap').css('display','none');$('#ordinaryMap').css('display','block');}if(selectVal=="地图"){$('#ordinaryMap').css('display','none');$('#satelliteMap').css('display','block');}}

css

.selectMap{right: 12px;top: 12px;cursor: pointer;width: 47px;height: 49px;z-index: 100;position: absolute;font-size: 12px;border: 1px solid rgb(128, 128, 128);background-color: rgb(255, 255, 255);}.ordinaryMap{width: 41px;height: 43px;position: absolute;margin: 2px;border: 1px solid rgb(128, 128, 128);background-image: url(http://webmap0.map.bdimg.com/image/api/mapctrls2d0.gif);background-color: transparent;background-position: 0px -221px;background-repeat: no-repeat no-repeat;}.satelliteMap{width: 41px;height: 43px;position: absolute;margin: 2px;border: 1px solid rgb(128, 128, 128);background-image: url(http://webmap0.map.bdimg.com/image/api/mapctrls2d0.gif);background-color: transparent;background-position: 0px -177px;background-repeat: no-repeat no-repeat;}.describeSpan{position: absolute;top: 27px;width: 41px;height: 16px;background-color: rgb(128, 128, 128);opacity: 0.5;}.describeSelectMap{position: absolute;top: 29px;width: 41px;color: white;text-align: center;line-height: 12px;}

学习jquery

0 0