0

如果选中同一行中的其他单选框之一，我有一个脚本标记第一个 td 单选框。问题是，当我尝试从两个单选框中获取具有值的字符串时，当我再次单击复选框时，会显示同一行中另一个选中的字符串，因此它落后于脚本的其余部分。我错过了什么？先感谢您！

var doc_radios;
var docString;
var addedString;
var finalString;
var linkString;
var radios = document.getElementsByName('custom_string');
var doc_radios = document.getElementsByName('doc_string');

function updateString() {
  for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
      // var with the value of the selected radio box
      addedString = radios[i].value;
      break;
    }
  }
  for (var i = 0, length = doc_radios.length; i < length; i++) {
    if (doc_radios[i].checked) {
      // var with the value of the selected radio box
      docString = doc_radios[i].value;
      break;
    }
  }

  final_string = 'https://google.com/' + addedString + '/' + docString + '_' + addedString + '.txt';
  linkString = document.getElementById('linkString');
  linkString.setAttribute('href', final_string);
  linkString.innerHTML = final_string;
}

function copyButton() {
  var copyText = document.getElementById("linkString");
  window.getSelection().selectAllChildren(copyText);
  document.execCommand("copy");
  var tooltip = document.getElementById("copyTooltip");
  tooltip.innerHTML = "Copied " + copyText.getAttribute('href');
}

function outFunc() {
  var tooltip = document.getElementById("copyTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}
var checkboxes = document.querySelectorAll('[type="radio"]');
[].forEach.call(checkboxes, function(checkbox) {
  checkbox.onchange = function() {
    var currentRow = this.parentNode.parentNode;
    var cbElems = currentRow.querySelectorAll('[name="doc_string"]');
    [].forEach.call(cbElems, function(cb) {
      cb.checked = this.checked;
    }.bind(this))
  };
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin-left: 25px;
  margin-top: 25px;
}

table {
  border: 1px solid #ccc;
  text-align: center;
}

table th {
  font-size: 18px;
}

table td:first-child {
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

table td:first-child input {
  margin-right: 10px;
}

table th:first-child {
  font-size: 14px;
  font-weight: 400;
}

table td,
table th {
  border: 1px solid #ccc;
  padding: 5px 10px;
}

td,
td p {
  padding: 2px 10px;
}

button {
  padding: 5px 15px;
}

.tooltip {
  position: relative;
  display: inline-block;
  width: 760px;
}

.tooltip button {
  width: 50%;
}

p.finalLink {}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 380px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 0%;
  margin-left: ;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
<table>
  <thead>
    <tr>
      <th>DOC/LANG</th>
      <th>DE</th>
      <th>EN</th>
      <th>ES</th>
      <th>FR</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input name="doc_string" type="radio" id="DOC1" value="DOC1" />DOC1
      </td>
      <td>
        <input name="custom_string" type="radio" id="DE" value="DE" onclick="updateString()" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="EN" value="EN" onclick="updateString()" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="ES" value="ES" onclick="updateString()" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="FR" value="FR" onclick="updateString()" />
      </td>
    </tr>
    <tr>
      <td>
        <input name="doc_string" type="radio" id="DOC2" value="DOC2" />DOC2
      </td>
      <td>
        <input name="custom_string" type="radio" id="DE" value="DE" onclick="updateString()" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="EN" value="EN" onclick="updateString()" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="ES" value="ES" onclick="updateString()" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="FR" value="FR" onclick="updateString()" />
      </td>
    </tr>
    <tr>
      <td>
        <input name="doc_string" type="radio" id="DOC3" value="DOC3" />DOC3
      </td>
      <td>
        <input name="custom_string" type="radio" id="DE" value="DE" onclick="updateString()" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="EN" value="EN" onclick="updateString()" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="ES" value="ES" onclick="updateString()" />
      </td>
      <td>
        <input name="custom_string" type="radio" id="FR" value="FR" onclick="updateString()" />
      </td>
    </tr>
  </tbody>
</table>
<br />
<p class="finalLink"><strong>FINAL LINK (Click on it to view or hit the button to copy to clipboard)</strong></p>
<br />
<a target="_blank" id="linkString" href="#" style="padding-right: 10px;">Select a checkbox</a>
<br /><br />
<div class="tooltip">
  <button onclick="copyButton()" onmouseout="outFunc()">
            <span class="tooltiptext" id="copyTooltip">Copy to clipboard</span>
            COPY LINK
        </button>
</div>

4

1 回答 1

0

我改变了它。它似乎工作。谢谢！

  var doc_radios;
var docString;
var addedString;
var final_string;
var linkString;
var radios = document.getElementsByName('custom_string');
var doc_radios = document.getElementsByName('doc_string');

var radiosCheckBoxes = document.querySelectorAll('input[type=radio]');

function changeHandler(event) {
  for (var i = 0, lengthi = radios.length; i < lengthi; i++) {
    if (radios[i].checked) {
      // var with the value of the selected radio box
      addedString = radios[i].value;
      break;
    }
  }
  for (var j = 0, lengthj = doc_radios.length; j < lengthj; j++) {
    if (doc_radios[j].checked) {
      // var with the value of the selected radio box
      docString = doc_radios[j].value;
      break;
    }
  }

  final_string = 'https://google.com/' + addedString + '/' + docString + '_' + addedString + '.txt';
  linkString = document.getElementById('linkString');
  linkString.setAttribute('href', final_string);
  linkString.innerHTML = final_string;
}
var checkboxes = document.querySelectorAll('[type="radio"]');
[].forEach.call(checkboxes, function(checkbox) {
  checkbox.onchange = function() {
    var currentRow = this.parentNode.parentNode;
    var cbElems = currentRow.querySelectorAll('[name="doc_string"]');
    [].forEach.call(cbElems, function(cb) {
      cb.checked = this.checked;
    }.bind(this));
  };
});


Array.prototype.forEach.call(radiosCheckBoxes, function(radio) {
   radio.addEventListener('change', changeHandler);
});

function copyButton() {
  var copyText = document.getElementById("linkString");
  window.getSelection().selectAllChildren(copyText);
  document.execCommand("copy");
  var tooltip = document.getElementById("copyTooltip");
  tooltip.innerHTML = "Copied " + copyText.getAttribute('href');
}

function outFunc() {
  var tooltip = document.getElementById("copyTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      margin-left: 25px;
      margin-top: 25px;
    }

    table {
      border: 1px solid #ccc;
      text-align: center;
    }

    table th {
      font-size: 18px;
    }

    table td:first-child {
      font-size: 18px;
      font-weight: 700;
      text-align: left;
    }

    table td:first-child input {
      margin-right: 10px;
    }

    table th:first-child {
      font-size: 14px;
      font-weight: 400;
    }

    table td,
    table th {
      border: 1px solid #ccc;
      padding: 5px 10px;
    }

    td,
    td p {
      padding: 2px 10px;
    }

    button {
      padding: 5px 15px;
    }

    .tooltip {
      position: relative;
      display: inline-block;
      width: 760px;
    }

    .tooltip button {
      width: 50%;
    }

    p.finalLink {}

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 380px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 150%;
      left: 0%;
      margin-left: 0;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }
<table>
      <thead>
        <tr>
          <th>DOC/LANG</th>
          <th>DE</th>
          <th>EN</th>
          <th>ES</th>
          <th>FR</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input name="doc_string" type="radio" id="DOC1" value="DOC1" />DOC1
          </td>
          <td>
            <input name="custom_string" type="radio" id="DE" value="DE" onchange="updateString()" />
          </td>
          <td>
            <input name="custom_string" type="radio" id="EN" value="EN" onchange="updateString()" />
          </td>
          <td>
            <input name="custom_string" type="radio" id="ES" value="ES" onchange="updateString()" />
          </td>
          <td>
            <input name="custom_string" type="radio" id="FR" value="FR" onchange="updateString()" />
          </td>
        </tr>
        <tr>
          <td>
            <input name="doc_string" type="radio" id="DOC2" value="DOC2" />DOC2
          </td>
          <td>
            <input name="custom_string" type="radio" id="DE" value="DE" onchange="updateString()" />
          </td>
          <td>
            <input name="custom_string" type="radio" id="EN" value="EN" onchange="updateString()" />
          </td>
          <td>
            <input name="custom_string" type="radio" id="ES" value="ES" onchange="updateString()" />
          </td>
          <td>
            <input name="custom_string" type="radio" id="FR" value="FR" onchange="updateString()" />
          </td>
        </tr>
        <tr>
          <td>
            <input name="doc_string" type="radio" id="DOC3" value="DOC3" />DOC3
          </td>
          <td>
            <input name="custom_string" type="radio" id="DE" value="DE" onchange="updateString()" />
          </td>
          <td>
            <input name="custom_string" type="radio" id="EN" value="EN" onchange="updateString()" />
          </td>
          <td>
            <input name="custom_string" type="radio" id="ES" value="ES" onchange="updateString()" />
          </td>
          <td>
            <input name="custom_string" type="radio" id="FR" value="FR" onchange="updateString()" />
          </td>
        </tr>
      </tbody>
    </table>
    <br />
    <p class="finalLink"><strong>FINAL LINK (Click on it to view or hit the button to copy to clipboard)</strong></p>
    <br />
    <a target="_blank" id="linkString" href="#" style="padding-right: 10px;">Select a checkbox</a>
    <br /><br />
    <div class="tooltip">
      <button onclick="copyButton()" onmouseout="outFunc()">
                <span class="tooltiptext" id="copyTooltip">Copy to clipboard</span>
                COPY LINK
            </button>
    </div>

于 2021-01-05T23:13:53.777 回答