DOM class 名称不适用于按钮

Question

我创建了一个按钮并添加了 tick glyphicon 。这样当我点击按钮时，刻度线应该是可见的。

我尝试使用 JavaScript 名称的 DOM 元素应用到 table 中的按钮。

但它不起作用

如果我点击按钮，刻度线会出现在所有按钮上但是当点击特定按钮时我想要它 就像单选按钮

谁能帮帮我

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>

Answer 1

通过函数传递当前点击的元素。

<button type="button" class="btn btn-xs " id="btn2" onclick="show(this)">Medium Value</button>

然后找到下一个兄弟姐妹，然后你就可以看到它了。

function show(target) {
     target.nextElementSibling.style.visibility = 'visible'
}

-------- 每行应选择一个项目 ------------

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'
}

Answer 2

您也可以通过以下方式之一进行此操作

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>

Answer 3

一开始你做的不对。太多重复的ID。您应该在单个 DOM 树中设置唯一 ID，然后像下面这样传递函数参数。你到处写 "loadingImage" 而不是你应该输入“loadingImage1”、“loadingImage2”、“loadingImage3”等

<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 show(target) {
  document.getElementById(target).style.visibility = 'visible';
}

Answer 4

嗨，我正在更新我的整个 table 就像@Nirali 所做的那样

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>

DOM class 名称不适用于按钮

DOM class name is not working for buttons

html

javascript

css

dom

getelementsbyclassname