jquery 点击获取span的值

直接代码

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>

js

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