87,993
社区成员
发帖
与我相关
我的任务
分享js新手问题 如何确认已经选中
如图，做一个新建和改名按钮，点击新建，则js新建一个li里面包含a，名字是undefined。然后想实现改名功能，点击改名就可以把已经选择的a里面的undefined更改成别的名字。现在遇到的问题是这个改名的功能不太会。第一个问题：如何确认标签a是被选择状态。第二个问题：应该先监听改名按钮，还是先监听a是否被选择。如何套用？用if语句行吗？
...全文
请发表友善的回复…
发表回复
天际的海浪 2018-12-19
- 打赏
- 举报
var selectA = null;
$("#page2_div_1_down_ul").on("click", "a", function(e){
selectA = this;
});
var altersubjectname = document.getElementById("altersubjectname");
altersubjectname.onclick = function(){
if (selectA) {
var name = prompt("请输入您的名字", "abc");
selectA.text = name;
} else {
alert("没有选中");
}
}
饺子da 2018-12-19
- 打赏
- 举报
$("#改名按钮id").click(function(event){
var a = $("li.选中样式class a");
});
[/quote]
不好意思我不会用jquery，用js你会么 现在我就差一个 用js判断a标签是否被选中的if语句，if括号里面的我不会写[/quote]
发一下你的完整代码，[/quote]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<style>
.page2_big{
position: absolute;
width:95%;
height:85%;
left: 2.5%;
top: 10%;
border:2px solid #DCDCDC;
border-radius:10px;
}
.page2_div_1{
position: absolute;
width:20%;
height:95%;
left: 2.5%;
top: 2.4%;
border:1px solid #DCDCDC;
border-radius:10px;
}
.page2_div_1_up{
position: absolute;
width:100%;
height:20%;
left: 0%;
top: 0%;
border:1px solid #DCDCDC;
border-radius:10px;
}
.page2_div_1_down{
position: absolute;
width:100%;
height:80%;
left: 0%;
top: 20%;
border:1px solid #DCDCDC;
border-radius:10px;
}
.pre-scrollable{
max-height: 100%;
min-height: 100%;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="tab-pane active" id="kecheng">
<div class="page2_big">
<div class="page2_div_1">
<div class="page2_div_1_up">
<button class="btn btn-default" id="page2_newcreatebtn">新建</button>
<button class="btn btn-default" id="altersubjectname">改名</button>
</div>
<div class="page2_div_1_down">
<ul class="nav nav-pills nav-stacked pre-scrollable" id="page2_div_1_down_ul">
</ul>
</div>
</div>
</div>
</div>
</body>
<script>
window.onload = function(){
var j = 0;
var page2_newcreatebtn = document.getElementById("page2_newcreatebtn");
page2_newcreatebtn.onclick = function(){
var page2_div_1_down_ul = document.getElementById("page2_div_1_down_ul");
if(page2_div_1_down_ul.getElementsByTagName("li").length == 0){
var createli = document.createElement("li");
var createa = document.createElement("a");
createa.href = "#"+ j;
j = j + 1;
createa.dataset.toggle = "tab";
var text = document.createTextNode("undefined");
createa.appendChild(text);
createli.appendChild(createa);
page2_div_1_down_ul.appendChild(createli);
}else{
var createli = document.createElement("li");
var createa = document.createElement("a");
createa.href = "#" + j;
j = j + 1;
createa.dataset.toggle = "tab";
var text = document.createTextNode("undefined");
createa.appendChild(text);
createli.appendChild(createa);
page2_div_1_down_ul.appendChild(createli);
}
}
$("#page2_div_1_down_ul").on("click", "a", function(e){
var altersubjectname = document.getElementById("altersubjectname");
altersubjectname.onclick = function(){
var page2_div_1_down_ul = document.getElementById("page2_div_1_down_ul");
var a = page2_div_1_down_ul.getElementsByTagName("a");//更改的是a
var li = page2_div_1_down_ul.getElementsByTagName("li");//点击的是li
for(var i=0; i<a.length; i++){
//就是想这里有一个if语句，判断是哪个被选中，现在是一起更改
//希望添加完if语句 能够单个更改
var name = prompt("请输入您的名字", "abc");
a[i].text = name;
}
}
})
}
</script>
</html>饺子da 2018-12-19
- 打赏
- 举报
$("#改名按钮id").click(function(event){
var a = $("li.选中样式class a");
});
[/quote]
不好意思我不会用jquery，用js你会么 现在我就差一个 用js判断a标签是否被选中的if语句，if括号里面的我不会写[/quote]
发一下你的完整代码，[/quote]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<style>
.page2_big{
position: absolute;
width:95%;
height:85%;
left: 2.5%;
top: 10%;
border:2px solid #DCDCDC;
border-radius:10px;
}
.page2_div_1{
position: absolute;
width:20%;
height:95%;
left: 2.5%;
top: 2.4%;
border:1px solid #DCDCDC;
border-radius:10px;
}
.page2_div_1_up{
position: absolute;
width:100%;
height:20%;
left: 0%;
top: 0%;
border:1px solid #DCDCDC;
border-radius:10px;
}
.page2_div_1_down{
position: absolute;
width:100%;
height:80%;
left: 0%;
top: 20%;
border:1px solid #DCDCDC;
border-radius:10px;
}
.pre-scrollable{
max-height: 100%;
min-height: 100%;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="tab-pane active" id="kecheng">
<div class="page2_big">
<div class="page2_div_1">
<div class="page2_div_1_up">
<button class="btn btn-default" id="page2_newcreatebtn">新建</button>
<button class="btn btn-default" id="altersubjectname">改名</button>
</div>
<div class="page2_div_1_down">
<ul class="nav nav-pills nav-stacked pre-scrollable" id="page2_div_1_down_ul">
</ul>
</div>
</div>
</div>
</div>
</body>
<script>
window.onload = function(){
var j = 0;
var page2_newcreatebtn = document.getElementById("page2_newcreatebtn");
page2_newcreatebtn.onclick = function(){
var page2_div_1_down_ul = document.getElementById("page2_div_1_down_ul");
if(page2_div_1_down_ul.getElementsByTagName("li").length == 0){
var createli = document.createElement("li");
var createa = document.createElement("a");
createa.href = "#"+ j;
j = j + 1;
createa.dataset.toggle = "tab";
var text = document.createTextNode("undefined");
createa.appendChild(text);
createli.appendChild(createa);
page2_div_1_down_ul.appendChild(createli);
}else{
var createli = document.createElement("li");
var createa = document.createElement("a");
createa.href = "#" + j;
j = j + 1;
createa.dataset.toggle = "tab";
var text = document.createTextNode("undefined");
createa.appendChild(text);
createli.appendChild(createa);
page2_div_1_down_ul.appendChild(createli);
}
}
$("#page2_div_1_down_ul").on("click", "a", function(e){
var altersubjectname = document.getElementById("altersubjectname");
altersubjectname.onclick = function(){
var page2_div_1_down_ul = document.getElementById("page2_div_1_down_ul");
var a = page2_div_1_down_ul.getElementsByTagName("a");//更改的是a
var li = page2_div_1_down_ul.getElementsByTagName("li");//点击的是li
for(var i=0; i<a.length; i++){
//就是想这里有一个if语句，判断是哪个被选中，现在是一起更改
//希望添加完if语句 能够单个更改
var name = prompt("请输入您的名字", "abc");
a[i].text = name;
}
}
})
}
</script>
</html>
天际的海浪 2018-12-19
- 打赏
- 举报
$("#改名按钮id").click(function(event){
var a = $("li.选中样式class a");
});
[/quote]
不好意思我不会用jquery，用js你会么 现在我就差一个 用js判断a标签是否被选中的if语句，if括号里面的我不会写[/quote]
发一下你的完整代码，
饺子da 2018-12-19
- 打赏
- 举报
$("#改名按钮id").click(function(event){
var a = $("li.选中样式class a");
});
[/quote]
不好意思我不会用jquery，用js你会么 现在我就差一个 用js判断a标签是否被选中的if语句，if括号里面的我不会写
yukuren 2018-12-19
- 打赏
- 举报
选中是加个class样式就行了，改名时通过这个样式判断
天际的海浪 2018-12-19
- 打赏
- 举报
$("#改名按钮id").click(function(event){
var a = $("li.选中样式class a");
});
饺子da 2018-12-19
- 打赏
- 举报
如何确认标签a是被选择状态。
天际的海浪 2018-12-19
- 打赏
- 举报
先做选择操作，在css中定义一个选中样式的class，为所有li绑定click事件（可以用委托事件），在事件中为当前li添加选中样式的class，并移除其它li的class。
改名时只要获取有选中样式class的li就可以了。
类似：
$("#ulID").on("click", "li", function(event){
$(this).addClass("选中样式class").siblings().removeClass("选中样式class");
});
$("#改名按钮id").click(function(event){
var selectLi = $("li.选中样式class");
});
