DOM类名称不适用于按钮 [英] DOM class name is not working for buttons
本文介绍了DOM类名称不适用于按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个按钮并添加了tick glyphicon。因此，当我单击按钮时，刻度线应该是可见的。
我试图使用JavaScript的Class Name的DOM元素将其应用于表中的按钮。 / p>
但它不起作用
如果我单击按钮，则在所有按钮
上都显示刻度线但是单击特定按钮时我想要它
就像单选按钮
任何人都可以帮助我
function show（target）{// document.getElementById（target）.style.visibility ='visible '; var x = document.getElementsByClassName（’fa-lg’）; for（var i = 0; i< x.length; i ++）{//.log(x[i]）; x [i] .style.visibility =可见； }}
.fa-check-circle {右：30px ;位置：绝对；} tr，td {颜色：deepskyblue; font-size：12px; border-bottom：2px点缀deepskyblue;}。btn.btn-xs {border-radius：0px;字体大小：15PX；背景色：whitesmoke;}
<！doctype html> ;< html lang = zh-CN>< head> <！-必需的元标记-> < meta charset = utf-8> < meta name = viewport content = width = device-width，initial-scale = 1，rinkle-to-fit = no> < ;!-Bootstrap CSS-> < link rel = stylesheet href = https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css完整性= sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJgtous = 4 <！-字体很棒-> < script defer src = https://use.fontawesome.com/releases/v5.0.10/js/all.js完整性= sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck / tL / 5szYlBbqgtS&;脚本> < title>你好，世界！< / title> < link rel = stylesheet href = ./ main.css> < link rel = stylesheet href = ./ test.css>< / head>< body> <！-脚本-> <！-jQuery库-> < script src = https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script> <！-最新编译的JavaScript-> < script src = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js< / script> < script src = ./ test.js>< / script> <！-<输入maxlength = 3 size = 3 value = 10 id = message> < textarea type = text id = name maxlength = 100 placeholder =命名您的想法 onkeyup = textCounter（this，’message’，100）;>< / textarea> -> <！-< button type = button class = btn btn-xs onclick = show（’loadingImage’）>中值< / button> < span class = fa-stack fa-lg id = loadingImage style = visibility：hidden> < i class = fas fa-check-circle< / i> < / span> -> < div class = row> < div> < h2 class = status>评估您的创意的价值将提供< / h2> < / div> < div class = row table-sensitive> < table class = table table-sensitive id = table> < tbody id = tbody> < tr> < td>客户体验< / td> < td> < button type = button class = btn btn-xs onclick = show（’loadingImage’）>低价值< / button> < span class = fa-stack fa-lg id = loadingImage style = visibility：hidden> < i class = fas fa-check-circle< / i> < / span> < / td> < td> < button type = button class = btn btn-xs onclick = show（’loadingImage’）>中值< / button> < span class = fa-stack fa-lg id = loadingImage style = visibility：hidden> < i class = fas fa-check-circle< / i> < / span> < / td> < td> < button type = button class = btn btn-xs>高价值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < / tr> < tr> < td>协作< / td> < td> < button type = button class = btn btn-xs>低价值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < td> < button type = button class = btn btn-xs>中值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < td> < button type = button class = btn btn-xs>高价值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < / tr> < tr> < td>钱< / td> < td> < button type = button class = btn btn-xs onclick = showIcon（）;>低价值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < td> < button type = button class = btn btn-xs>中值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < td> < button type = button class = btn btn-xs>高价值< / button> < / td> < / tr> < tr> < td>时间< / td> < td> < button type = button class = btn btn-xs>低价值< / button> < / td> < td> < button type = button class = btn btn-xs>中值< / button> < / td> < td> < button type = button class = btn btn-xs>高价值< / button> < / td> < / tr> < tr> < td>质量< / td> < td> < button type = button class = btn btn-xs>低价值< / button> < / td> < td> < button type = button class = btn btn-xs>中值< / button> < / td> < td> < button type = button class = btn btn-xs>高价值< / button> < / td> < / tr> < / tbody> < / table> < / div> < / div>< / body>< / html>
解决方案
您也可以通过以下方式之一
函数findAncestor（el，cls）{while（（el = el.parentElement）&&！el.classList.contains（cls））;返回el }函数show（target）{var row = findAncestor（target，'test'）; var tick = row.getElementsByClassName（ fa-lg）; Array.prototype.forEach.call（tick，function（el）{el.style.visibility ='hidden'}）; target.nextElementSibling.style.visibility ='visible'}
.fa-check-circle {右：30px;位置：绝对；} tr，td {颜色：deepskyblue; font-size：12px; border-bottom：2px点缀deepskyblue;}。btn.btn-xs {border-radius：0px;字体大小：15PX； background-color：whitesmoke;}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><!doctype html>< html lang = zh-CN> < head> <！-必需的元标记-> < meta charset = utf-8> < meta name = viewport content = width = device-width，initial-scale = 1，rinkle-to-fit = no> < ;!-Bootstrap CSS-> < link rel = stylesheet href = https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css完整性= sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJgtous = 4 <！-字体很棒-> < script defer src = https://use.fontawesome.com/releases/v5.0.10/js/all.js完整性= sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXddCU8Yu8ck / tL / 5szYlBbqgtS&;脚本> < title>你好，世界！< / title> < link rel = stylesheet href = ./ main.css> < link rel = stylesheet href = ./ test.css>< / head>< body> < div class = container> < button type = button class = btn btn-xs id = btn2 onclick = show（this）>中值< / button> < span class = fa-stack fa-lg id = loadingImage style = visibility：hidden> < i class = fas fa-check-circle< / i> < / span> < div class = row> < div class = cols col-sm-12>< / div> < div> < h2 class = status>对您的创意的价值进行评级/// h2> < / div> < div class = row table-sensitive> < table class = table table-sensitive id = table> < tbody id = tbody> < tr class = test> < td>客户体验< / td> < td> < button type = button class = btn btn-xs id = btn2 onclick = show（this）>低价值< / button> < span class = fa-stack fa-lg id = loadingImage style = visibility：hidden> < i class = fas fa-check-circle< / i> < / span> < / td> < td> < button type = button class = btn btn-xs id = btn2 onclick = show（this）>中值< / button> < span class = fa-stack fa-lg id = loadingImage style = visibility：hidden> < i class = fas fa-check-circle< / i> < / span> < / td> < td> < button type = button class = btn btn-xs id = btn2>高价值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < / tr> < tr class = test> < td>协作< / td> < td> < button type = button class = btn btn-xs id = btn2>低价值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < td> < button type = button class = btn btn-xs id = btn2>中值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < td> < button type = button class = btn btn-xs id = btn2>高价值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < / tr> < tr class = test> < td>钱< / td> < td> < button type = button class = btn btn-xs id = btn2 onclick = showIcon（）;>低价值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < td> < button type = button class = btn btn-xs id = btn2>中值< / button> < span class = fa-stack fa-lg> < i id = loadingImage class = fas fa-check-circle>< / i> < / span> < / td> < td> < button type = button class = btn btn-xs id = btn2>高价值< / button> < / td> < / tr> < tr class = test> < td>时间< / td> < td> < button type = button class = btn btn-xs id = btn2>低价值< / button> < / td> < td> < button type = button class = btn btn-xs id = btn2>中值< / button> < / td> < td> < button type = button class = btn btn-xs id = btn2>高价值< / button> < / td> < / tr> < tr class = test> < td>质量< / td> < td> < button type = button class = btn btn-xs id = btn2>低价值< / button> < / td> < td> < button type = button class = btn btn-xs id = btn2>中值< / button> < / td> < td> < button type = button class = btn btn-xs id = btn2>高价值< / button> < / td> < / tr> < / tbody> < / table> < / div> < / div> < / div> < script src = ./ test.js>< / script> < / div> < / body>< / html>
I have created a button and added tick glyphicon . so that when i clicked on the button the tick mark should be visible.
I tried to apply to the buttons in my table using DOM element of Class Name using JavaScript.
but it is not working
if i click button the tick mark is appearing on all buttons but i want it when the specific button is clicked just like radio button
can Anyone Help me
function show(target) {
// document.getElementById(target).style.visibility = 'visible';
var x = document.getElementsByClassName('fa-lg');
for (var i = 0; i < x.length; i++) {
//.log(x[i]);
x[i].style.visibility = 'visible';
}
}
.fa-check-circle {
right: 30px;
position: absolute;
}
tr,
td {
color: deepskyblue;
font-size: 12px;
border-bottom: 2px dotted deepskyblue;
}
.btn.btn-xs {
border-radius: 0px;
font-size: 15PX;
background-color: whitesmoke;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!--font awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<title>Hello, world!</title>
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./test.css">
</head>
<body>
<!--scripts-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./test.js"></script>
<!-- <input maxlength="3" size="3" value="10" id="message">
<textarea type="text" id="name" maxlength="100" placeholder="Name your Idea" onkeyup="textCounter(this,'message',100);"></textarea> -->
<!-- <button type="button" class="btn btn-xs " onclick="show('loadingImage')">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span> -->
<div class="row">
<div>
<h2 class="status">Rate the value of Your Idea will Provide</h2>
</div>
<div class="row table-responsive">
<table class="table table-responsive" id="table">
<tbody id="tbody">
<tr>
<td>
Client Experience
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show('loadingImage')">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show('loadingImage')">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs">High Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr>
<td>
Collaboration
</td>
<td>
<button type="button" class="btn btn-xs">Low Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs">Medium Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs">High Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr>
<td>
Money
</td>
<td>
<button type="button" class="btn btn-xs" onclick="showIcon();">Low Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs">Medium Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs">High Value</button>
</td>
</tr>
<tr>
<td>
Time
</td>
<td>
<button type="button" class="btn btn-xs">Low Value</button>
</td>
<td>
<button type="button" class="btn btn-xs">Medium Value</button>
</td>
<td>
<button type="button" class="btn btn-xs">High Value</button>
</td>
</tr>
<tr>
<td>
Quality
</td>
<td>
<button type="button" class="btn btn-xs">Low Value</button>
</td>
<td>
<button type="button" class="btn btn-xs">Medium Value</button>
</td>
<td>
<button type="button" class="btn btn-xs">High Value</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
解决方案
You can also do this one of the following way
function findAncestor (el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
function show(target) {
var row = findAncestor(target, 'test');
var tick = row.getElementsByClassName("fa-lg");
Array.prototype.forEach.call(tick, function(el) {
el.style.visibility = 'hidden'
});
target.nextElementSibling.style.visibility = 'visible'
}
.fa-check-circle {
right: 30px;
position: absolute;
}
tr,
td {
color: deepskyblue;
font-size: 12px;
border-bottom: 2px dotted deepskyblue;
}
.btn.btn-xs {
border-radius: 0px;
font-size: 15PX;
background-color: whitesmoke;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!--font awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<title>Hello, world!</title>
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-xs " id="btn2" onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<div class="row">
<div class="cols col-sm-12"></div>
<div>
<h2 class="status">Rate the value of Your Idea will Provide</h2>
</div>
<div class="row table-responsive">
<table class="table table-responsive" id="table">
<tbody id="tbody">
<tr class="test">
<td>
Client Experience
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " id="btn2" onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">High Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Collaboration
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">Low Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">Medium Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">High Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Money
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2" onclick="showIcon();">Low Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">Medium Value</button>
<span class="fa-stack fa-lg">
<i id="loadingImage" class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">High Value</button>
</td>
</tr>
<tr class="test">
<td>
Time
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">Low Value</button>
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">Medium Value</button>
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">High Value</button>
</td>
</tr>
<tr class="test">
<td>
Quality
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">Low Value</button>
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">Medium Value</button>
</td>
<td>
<button type="button" class="btn btn-xs" id="btn2">High Value</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="./test.js"></script>
</div>
</body>
</html>
这篇关于DOM类名称不适用于按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
