87,922
社区成员
发帖
与我相关
我的任务
分享jquery操作appned到页面的代码的问题
<script type="text/javascript">
$(function () {
$("#mycmb").click(function (e) {
var dd = $("<ul id='ulcmb'></ul>");
dd.css("border-color", "blue");
dd.css("border-style", "solid");
dd.css("border-width", "1px");
dd.css("position", "absolute");
dd.css("left", $(this).offset().left);
dd.css("top", $(this).offset().top + $(this).height());
dd.css("margin", "0");
dd.css("padding", "0");
dd.width($("input", $(this)).width());
$("<li><font color='red'><i>山西</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>北京</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>上海</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>天津</i></font></li>").appendTo(dd);
$(this).parent().append(dd);
})
$("#mycmb>input").focus(function () {
$(this).blur();
})
})
</script>
<div id='mycmb'>
<input type='text' /><img src="images/heart.jpg" width='15px' height='20px'/>
</div>
我想在鼠标移到<li>上时变色并且点击某个li的话隐藏bb,这个怎么操作，求告知解惑
$(function () {
$("#mycmb").click(function (e) {
var dd = $("<ul id='ulcmb'></ul>");
dd.css("border-color", "blue");
dd.css("border-style", "solid");
dd.css("border-width", "1px");
dd.css("position", "absolute");
dd.css("left", $(this).offset().left);
dd.css("top", $(this).offset().top + $(this).height());
dd.css("margin", "0");
dd.css("padding", "0");
dd.width($("input", $(this)).width());
$("<li><font color='red'><i>山西</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>北京</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>上海</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>天津</i></font></li>").appendTo(dd);
$(this).parent().append(dd);
})
$("#mycmb>input").focus(function () {
$(this).blur();
})
})
</script>
<div id='mycmb'>
<input type='text' /><img src="images/heart.jpg" width='15px' height='20px'/>
</div>
我想在鼠标移到<li>上时变色并且点击某个li的话隐藏bb,这个怎么操作，求告知解惑
...全文
请发表友善的回复…
发表回复
那一笑的凄凉 2012-06-30
- 打赏
- 举报
楼主不好意思有点点bug,每次点击输入框都会在页面上插入一个新的ulcmb，少了句话，把点击方法换成下面的
$("#ulcmb li").click(
function () {
$("#ulcmb").hide();
$("#txt").val($(this).find("i").html());
$("#ulcmb").remove();
}
);
$("#ulcmb li").click(
function () {
$("#ulcmb").hide();
$("#txt").val($(this).find("i").html());
$("#ulcmb").remove();
}
);
那一笑的凄凉 2012-06-30
- 打赏
- 举报
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.hover{ background-color:Blue; }
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#mycmb").click(function (e) {
var dd = $("<ul id='ulcmb'></ul>");
dd.css("border-color", "blue");
dd.css("border-style", "solid");
dd.css("border-width", "1px");
dd.css("position", "absolute");
dd.css("left", $(this).offset().left);
dd.css("top", $(this).offset().top + $(this).height());
dd.css("margin", "0");
dd.css("padding", "0");
dd.width($("input", $(this)).width());
$("<li><font color='red'><i>山西</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>北京</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>上海</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>天津</i></font></li>").appendTo(dd);
$(this).parent().append(dd);
$("#ulcmb li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
$("ul li").click(
function () {
$("#ulcmb").hide();
$("#txt").val($(this).find("i").html());
}
);
})
$("#mycmb>input").focus(function () {
$(this).blur();
})
})
</script>
</head>
<body>
<div id='mycmb'>
<input type='text' id="txt" /><img src="images/heart.jpg" width='15px' height='20px'/>
</div>
</body>
</html>
<head>
<title></title>
<style type="text/css">
.hover{ background-color:Blue; }
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#mycmb").click(function (e) {
var dd = $("<ul id='ulcmb'></ul>");
dd.css("border-color", "blue");
dd.css("border-style", "solid");
dd.css("border-width", "1px");
dd.css("position", "absolute");
dd.css("left", $(this).offset().left);
dd.css("top", $(this).offset().top + $(this).height());
dd.css("margin", "0");
dd.css("padding", "0");
dd.width($("input", $(this)).width());
$("<li><font color='red'><i>山西</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>北京</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>上海</i></font></li>").appendTo(dd);
$("<li><font color='red'><i>天津</i></font></li>").appendTo(dd);
$(this).parent().append(dd);
$("#ulcmb li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
$("ul li").click(
function () {
$("#ulcmb").hide();
$("#txt").val($(this).find("i").html());
}
);
})
$("#mycmb>input").focus(function () {
$(this).blur();
})
})
</script>
</head>
<body>
<div id='mycmb'>
<input type='text' id="txt" /><img src="images/heart.jpg" width='15px' height='20px'/>
</div>
</body>
</html>
ssvfdn 2012-06-30
- 打赏
- 举报
而且楼主你的CSS简写下吧。。CSS支持传对象 {width:100px,height:100}
001007009 2012-06-30
- 打赏
- 举报
$('li').live('click', function(){
//...
})
动态添加的DOM 用live来绑定事件
//...
})
动态添加的DOM 用live来绑定事件
