jquery！！！求大哥解决啊！！！大哥们都来看看啊！

qq_38214203 2017-04-25 12:50:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='jquery-1.11.3.min.js'></script>
<style>
*{
padding: 0;
margin: 0;
}
.box{
margin:100px 100px;
}
.sle,.top{
float: left;
}

a{
text-decoration: none;
color:#000;
padding:2px 6px;
display: block;
border:1px solid #ddd;

position:relative;
}
ul li,ol li{
list-style: none;
}
.menu{
border:1px solid #ddd;
position:absolute;
left:-2px;
top:25px;
width:300px;
display: none;
}
ul li{
padding:0 20px;
float:left;
}
ul li.on{
background:red;
}
ol{
clear:both;
display: none;
}
ol.no{
display: block;
}
ol li{
padding:0 20px;
float:left;
}
</style>
</head>
<body>
<div class='box'>
<span class='sle'>请选择:</span>
<a href="javescript:;" class='top'><i id="zj">杭州</i><em id="sd">济南</em>
<div class='menu'>
<ul class='tab'>
<li class='on'>浙江</li>
<li>山东</li>
</ul>
<ol id="sss" class='no'>
<li>杭州</li>
<li>苏州</li>
<li>宁波</li>
</ol>
<ol id="ddd" >
<li>济南</li>
<li>青岛</li>
<li>烟台</li>
</ol>
</div>
</a>
</div>
<script>
//鼠标悬浮出现下拉框
$('.top').hover(function(){
$(".menu").toggle();
})
//给.tab下Li 点击事件
$('.tab li').click(function(e){
$(this).addClass('on').siblings().removeClass('on');
var index=$('.tab li').index(this);
//console.log(e);
$("ol").eq(index).addClass("no").siblings().removeClass('no');
$(this).eq(index).val();
});
$('.tab li').click(function(e){
$(this).addClass('on').siblings().removeClass('on');
var index=$('.tab li').index(this);
//console.log(e);
$("ol").eq(index).addClass("no").siblings().removeClass('no');
});
$('ol li').click(function() {
if(!$("#sss li[class='on']").text()){
$("#zj").text($(this).text());
}
if(!$("#ddd li[class='on']").text()){
$("#sd").text($(this).text());
}
});
</script>
</body>
</html>
点击杭州后增加到框内，然后点击济南在杭州后添加到框内？求大神解决！！拜谢！
...全文
288 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_38214203 2017-04-27
  • 打赏
  • 举报
 回复
<script> //鼠标悬浮出现下拉框 $('.top').hover(function(){ $(".menu").toggle(); }) //给.tab下Li 点击事件 $('.tab li').click(function(e){ $(this).addClass('on').siblings().removeClass('on'); var index=$('.tab li').index(this); //console.log(e); $("ol").eq(index).addClass("no").siblings().removeClass('no'); }); $('ol li').click(function(e) { if(!$("#sss li[class='on']").text()){ $("#zj").text($(".tab li[class='on']").text()+$(this).text()); $("#sd").hide(); } else if(!$("#ddd li[class='on']").text()){ $("#sd").text($(".tab li[class='on']").text()+$(this).text()); $("#zj").hide(); } }); </script> </body> </html>[/code][/quote] 大哥好！ 如果我要实现两个 是不是要写两个同样的方法?还是怎么?jquery选择器真的不会用，每次都获取多，重复
qq_38214203 2017-04-25
  • 打赏
  • 举报
 回复
引用 3 楼 wz_307 的回复:
这里改一下就行了


$('ol li').click(function() {

	$("#zj").text($(".tab .on").text()); // 这里



	if(!$("#ddd li[class='on']").text()){

		$("#sd").text($(this).text());

	}

});

嗯 还是上面的代码 大哥你给我改下把 谢谢了，我要的效果我才搞明白是这样的：

点击完明细下面的框内就会有浙江-杭州，同样点击山东到明细济南 框内就会显示山东-济南。谢谢你了 大哥！！！
wz_307 2017-04-25
  • 打赏
  • 举报
 回复
这里改一下就行了


$('ol li').click(function() {

	$("#zj").text($(".tab .on").text()); // 这里



	if(!$("#ddd li[class='on']").text()){

		$("#sd").text($(this).text());

	}

});
qq_38214203 2017-04-25
  • 打赏
  • 举报
 回复
引用 1 楼 jslang 的回复:

	<script>
		//鼠标悬浮出现下拉框
		$('.top').hover(function(){
			$(".menu").toggle();
		})
		//给.tab下Li 点击事件
		$('.tab li').click(function(e){
			$(this).addClass('on').siblings().removeClass('on');
			var index=$('.tab li').index(this);
			//console.log(e);
			$("ol").eq(index).addClass("no").siblings().removeClass('no');
		});
		$('ol li').click(function() {
			if($("#sss.no").length>0){
				$("#zj").text($(this).text());
			}
			if($("#ddd.no").length>0){
				$("#sd").text($(this).text());
			}
		});
	</script>
我要的效果为：浙江杭州-山东济南，之前说的效果不对，不好意思了哈。大哥@jslang
香蕉猪 2017-04-25
  • 打赏
  • 举报
 回复
引用 7 楼 qq_38214203 的回复:
[quote=引用 6 楼 gy127132060 的回复:] [quote=引用 4 楼 qq_38214203 的回复:] [quote=引用 3 楼 wz_307 的回复:] 这里改一下就行了 

$('ol li').click(function() {
	$("#zj").text($(".tab .on").text()); // 这里

	if(!$("#ddd li[class='on']").text()){
		$("#sd").text($(this).text());
	}
});
嗯 还是上面的代码 大哥你给我改下把 谢谢了，我要的效果我才搞明白是这样的： 点击完明细下面的框内就会有浙江-杭州，同样点击山东到明细济南 框内就会显示山东-济南。谢谢你了 大哥！！！[/quote]感觉楼主需要的应该是一个二级联动的选择插件阿。。。。[/quote] 要是能用插件 早就完事了。哎[/quote]唷，，，还不能用插件，，，这么为难。。。 那试试这样。。。。 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='jquery-1.11.3.min.js'></script>
<style>
*{
padding: 0;
margin: 0;
}
.box{
margin:100px 100px;
}
.sle,.top{
float: left;
}

a{
text-decoration: none;
color:#000;
padding:2px 6px;
display: block;
border:1px solid #ddd;

position:relative;
}
ul li,ol li{
list-style: none;
}
.menu{
border:1px solid #ddd;
position:absolute;
left:-2px;
top:25px;
width:300px;
display: none;
}
ul li{
padding:0 20px;
float:left;
}
ul li.on{
background:red;
}
ol{
clear:both;
display: none;
}
ol.no{
display: block;
}
ol li{
padding:0 20px;
float:left;
}
</style>
</head>
<body>
<div class='box'>
<span class='sle'>请选择:</span>
<a href="javescript:;" class='top'><i id="zj">杭州</i><em id="sd">济南</em>
	<div class='menu'>
		<ul  class='tab'>
			<li class='on'>浙江</li>
			<li>山东</li>
		</ul>
		<ol id="sss" class='no'>
			<li>杭州</li>
			<li>苏州</li>
			<li>宁波</li>
		</ol>
		<ol id="ddd" >
			<li>济南</li>
			<li>青岛</li>
			<li>烟台</li>
		</ol>
	</div>
</a>
</div>
<script>
//鼠标悬浮出现下拉框
$('.top').hover(function(){
	$(".menu").toggle();
})
//给.tab下Li 点击事件
$('.tab li').click(function(e){
	$(this).addClass('on').siblings().removeClass('on');
	var index=$('.tab li').index(this);
	//console.log(e);
	$("ol").eq(index).addClass("no").siblings().removeClass('no');
});
$('ol li').click(function(e) {
	if(!$("#sss li[class='on']").text()){
		$("#zj").text($(".tab li[class='on']").text()+$(this).text());
		$("#sd").hide();
	}
	else if(!$("#ddd li[class='on']").text()){
		$("#sd").text($(".tab li[class='on']").text()+$(this).text());
		$("#zj").hide();
	}
});
</script>
</body>
</html>
qq_38214203 2017-04-25
  • 打赏
  • 举报
 回复
引用 6 楼 gy127132060 的回复:
[quote=引用 4 楼 qq_38214203 的回复:] [quote=引用 3 楼 wz_307 的回复:] 这里改一下就行了 

$('ol li').click(function() {
	$("#zj").text($(".tab .on").text()); // 这里

	if(!$("#ddd li[class='on']").text()){
		$("#sd").text($(this).text());
	}
});
嗯 还是上面的代码 大哥你给我改下把 谢谢了，我要的效果我才搞明白是这样的： 点击完明细下面的框内就会有浙江-杭州，同样点击山东到明细济南 框内就会显示山东-济南。谢谢你了 大哥！！！[/quote]感觉楼主需要的应该是一个二级联动的选择插件阿。。。。[/quote] 要是能用插件 早就完事了。哎
香蕉猪 2017-04-25
  • 打赏
  • 举报
 回复
引用 4 楼 qq_38214203 的回复:
[quote=引用 3 楼 wz_307 的回复:] 这里改一下就行了 

$('ol li').click(function() {
	$("#zj").text($(".tab .on").text()); // 这里

	if(!$("#ddd li[class='on']").text()){
		$("#sd").text($(this).text());
	}
});
嗯 还是上面的代码 大哥你给我改下把 谢谢了，我要的效果我才搞明白是这样的： 点击完明细下面的框内就会有浙江-杭州，同样点击山东到明细济南 框内就会显示山东-济南。谢谢你了 大哥！！！[/quote]感觉楼主需要的应该是一个二级联动的选择插件阿。。。。
天际的海浪 2017-04-25
  • 打赏
  • 举报
 回复 

	<script>
		//鼠标悬浮出现下拉框
		$('.top').hover(function(){
			$(".menu").toggle();
		})
		//给.tab下Li 点击事件
		$('.tab li').click(function(e){
			$(this).addClass('on').siblings().removeClass('on');
			var index=$('.tab li').index(this);
			//console.log(e);
			$("ol").eq(index).addClass("no").siblings().removeClass('no');
		});
		$('ol li').click(function() {
			if($("#sss.no").length>0){
				$("#zj").text($(".tab li.on").text()+$(this).text());
			}
			if($("#ddd.no").length>0){
				$("#sd").text($(".tab li.on").text()+$(this).text());
			}
		});
	</script>
天际的海浪 2017-04-25
  • 打赏
  • 举报
 回复 

	<script>
		//鼠标悬浮出现下拉框
		$('.top').hover(function(){
			$(".menu").toggle();
		})
		//给.tab下Li 点击事件
		$('.tab li').click(function(e){
			$(this).addClass('on').siblings().removeClass('on');
			var index=$('.tab li').index(this);
			//console.log(e);
			$("ol").eq(index).addClass("no").siblings().removeClass('no');
		});
		$('ol li').click(function() {
			if($("#sss.no").length>0){
				$("#zj").text($(this).text());
			}
			if($("#ddd.no").length>0){
				$("#sd").text($(this).text());
			}
		});
	</script>
jquery 判断是否有类名_我现在写jquery，你们会不会打我？
时光荏苒，岁月如梭，转眼多年过去。前端天下已各分东西，回眸看看来时的路，你我可曾记得当年的大哥 jquery。回想那个纯真的年代，jquery一统天下，前端的世界如此纯洁无瑕。引子 此时此刻又让我想起了当年的游戏时光，早期游戏只能玩类似《传奇》《魔力宝贝》这么些。大家没得选所有人都会玩这么几款游戏，随着时间推移现在游戏越来越多,忽然发现可以玩的游戏却少了，前端世界也是如此，框架技术层出不穷，很多...
jquery 判断是否有类名_我现在写jquery，你们会不会打我？？
时光荏苒，岁月如梭，转眼多年过去。前端天下已各分东西，回眸看看来时的路，你我可曾记得当年的大哥 jquery。回想那个纯真的年代，jquery一统天下，前端的世界如此纯洁无瑕。引子此时此刻又让我想起了当年的游戏时光，早期游戏只能玩类似《传奇》《魔力宝贝》这么些。大家没得选所有人都会玩这么几款游戏，随着时间推移现在游戏越来越多,忽然发现可以玩的游戏却少了，前端世界也是如此，框架技术层出不穷，很多前端...
我现在写jquery，你们会不会打我？？
时光荏苒，岁月如梭，转眼多年过去。前端天下已各分东西，回眸看看来时的路，你我可曾记得当年的大哥 jquery。回想那个纯真的年代，jquery一统天下，前端的世界如此纯洁无瑕。 引子 此时此刻又让我想起了当年的游戏时光，早期游戏只能玩类似《传奇》《魔力宝贝》这么些。大家没得选所有人都会玩这么几款游戏，随着时间推移现在游戏越来越多,忽然发现可以玩的游戏却少了，前端世界也是如此，框架技术层出不穷，很多前端同学开始争论哪种技术更强，哪种框架更6，其实大可不必。如同现在玩游戏一样 ，我们找的只是当年的那份快乐，玩
js实现jQuery的简单方法和链式操作
我用这篇文章来理一理如何用js去实现封装jQuery的简单方法。 本文js实现了下面jquery的几种方法，我将它分为8个小目标 实现$(".box1").click( )方法 实现$(“div”).click( )方法 考虑$( )中参数的三种情况 实现jq中的on方法 实现链式操作 实现jq中的eq方法 实现jq中的end方法 实现jq中的css方法 有不正确的地方还望大家在评论区指出来，谢谢啦。 1. 实现$(".box1").click( )方法 首先，我们定第一个小目标，就是如何一步一步去
js实现jquery的简单方法和链式操作
我用这篇文章来理一理如何用js去实现封装jQuery的简单方法。 文末有完整代码链接，需要代码的朋友直接看文末 本文js实现了下面jquery的几种方法，我将它分为8个小目标 实现$(".box1").click( )方法 实现$(“div”).click( )方法 考虑$( )中参数的三种情况 实现jq中的on方法 实现链式操作 实现jq中的eq方法 实现jq中的end方法 实现jq中的css方法 有不正确的地方还望大家在评论区指出来，谢谢啦。 1. 实现$(".box1").click( .
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章