J'ai créé un bouton et ajouté un glyphicon à cocher. de sorte que lorsque je clique sur le bouton, la coche doit être visible.

J'ai essayé de m'appliquer aux boutons de ma table en utilisant l'élément DOM du nom de classe en utilisant JavaScript.

Mais ça ne marche pas

Si je clique sur le bouton, la coche apparaît sur tous les boutons mais je le veux quand on clique sur le bouton spécifique comme le bouton radio

Quelqu'un peut-il m'aider

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
Keerthi Reddy Yeruva 12 avril 2018 à 08:00

4 réponses

Meilleure réponse

Vous pouvez également le faire de l'une des manières suivantes

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>
1
Nirali 12 avril 2018 à 06:42

Au début, vous ne faites pas correctement. trop d'ID en double. Vous devez définir un ID unique dans une arborescence DOM unique, puis passer par le paramètre de fonction comme ci-dessous. Vous écrivez partout "loadingImage" à la place, vous devez taper "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>

La fonction devrait aimer:

function show(target) {
  document.getElementById(target).style.visibility = 'visible';
}
0
Hanif 12 avril 2018 à 05:18

Passer l'élément cliqué actuel via la fonction.

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

Ensuite, trouvez le prochain frère qui est alors vous pourrez le voir.

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

-------- Un élément doit être sélectionné dans chaque ligne -------------

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'
}
2
Ghazni 12 avril 2018 à 07:02

Salut, je mets à jour toute ma table comme l'a fait @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>
0
Keerthi Reddy Yeruva 12 avril 2018 à 07:12