问题
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>回答1:
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>回答2:
Pass current clicked element through function.
<button type="button" class="btn btn-xs " id="btn2" onclick="show(this)">Medium Value</button>
Then find next sibling that is then you will be able to visible it.
function show(target) {
target.nextElementSibling.style.visibility = 'visible'
}
-------- One item should selected in each row -------------
function show(target) {
var tds = target.parentElement.parentElement.children;
for(var i = 0; i< tds.length; i++)
{
var spanElement = tds[i].getElementsByClassName('fa-lg')[0];
if(spanElement)
{
if(tds[i].getElementsByClassName('fa-lg')[0].style !== undefined)
tds[i].getElementsByClassName('fa-lg')[0].style.visibility = 'hidden';
else
tds[i].getElementsByClassName('fa-lg')[0].css('visibility', 'hidden');
}
}
target.nextElementSibling.style.visibility = 'visible'
}
回答3:
At first you doing not proper way. too much duplicate ID. You should set unique ID in single DOM tree then pass through function parameter like bellow. You writing everywhere "loadingImage" instead you should type "loadingImage1", "loadingImage2", "loadingImage3" etc.
<tr>
<td> Client Experience </td>
<td><button type="button" class="btn btn-xs" id="btn2" onclick="show('loadingImage2')">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage2" style="visibility: hidden"> <i class="fas fa-check-circle"></i> </span></td>
<td><button type="button" class="btn btn-xs " id="btn2" onclick="show('loadingImage3')">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage3" style="visibility: hidden"> <i class="fas fa-check-circle"></i> </span></td>
<td><button type="button" class="btn btn-xs" id="btn2" onclick="show('loadingImage4')">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage4"> <i class="fas fa-check-circle"></i> </span></td>
</tr>
Function should like following:
function show(target) {
document.getElementById(target).style.visibility = 'visible';
}
回答4:
Hi I am Updating my whole table as @Nirali did
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;
}<!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>
<div class="row justify-content-center">
<div>
<h2 class="status">Rate the value of Your Idea will Provide</h2>
</div>
<div class="row">
<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" 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 " 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 " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Collaboration
</td>
<td>
<button type="button" class="btn btn-xs" 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 " 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 " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Money
</td>
<td>
<button type="button" class="btn btn-xs" 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 " 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 " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Time
</td>
<td>
<button type="button" class="btn btn-xs" 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 " 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 " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Quality
</td>
<td>
<button type="button" class="btn btn-xs" 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 " 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 " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>来源：https://stackoverflow.com/questions/49788325/dom-class-name-is-not-working-for-buttons