从div复制文本以输入javascript

Question

我只是想知道是否可以将具有相同类名的div中的文本复制到输入字段中

我正在尝试将具有相同类名称的div中的每个名称复制到一个输入字段中

function copyname() {
  var elems = document.getElementsByClassName("hud-leaderboard-party");
  var lastElem = elems[elems.length - 1];
  document.getElementsByClassName("hud-intro-name")[0].value = lastElem.innerText;
}

<div class="hud-intro-leaderboard-parties">
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
</div>
<br>


<input type="text" class="hud-intro-name" maxlength="50" style="width: 100%;">
<br><br>
<button class="btn btn-green" style="width: 100%;" onclick="copyname();">COPY NAME</button>

我知道它会在div单击按钮时将所有文本从div复制到输入，但是我想知道是否有一种方法只能从div复制一个名称到输入，如果再次单击按钮，则将下一个名字从div复制到输入等等？

Answer 1

您可以在div中跟踪当前名称的索引（我更改了div的内容以解决应读取div的更改）：

function copyname() {
  // Keep track of div and name indices
  this.divIndex = typeof this.divIndex === 'number' ? this.divIndex : 0;
  this.index = typeof this.index === 'number' ? this.index : 0; 

  // Get current div
  var elems = document.getElementsByClassName("hud-leaderboard-party");
  if (this.divIndex < elems.length) {
    var elem = elems[this.divIndex];
  } else {
    // Do stuff if out of divs..
    return;
  }
  
  // Get current name
  var currentNames = elem.innerText.split(',');
  if (this.index < currentNames.length) {
    var name = currentNames[this.index].trim();
  document.getElementsByClassName("hud-intro-name")[0].value = name;
  
    // Or if you want to append the names
    //var names = document.getElementsByClassName("hud-intro-name")[0].value;
    //document.getElementsByClassName("hud-intro-name")[0].value += (names === '' ? '' : ',') + name
  }
  
  // Update indices
  this.index++;
  if (this.index >= currentNames.length) {
    this.index = 0;
    this.divIndex++;
  }
}

<div class="hud-intro-leaderboard-parties">
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 5, NAME HERE 6, NAME HERE 7, NAME HERE 8 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 9, NAME HERE 10, NAME HERE 11, NAME HERE 12 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 13, NAME HERE 14, NAME HERE 15, NAME HERE 16 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 17, NAME HERE 18, NAME HERE 19, NAME HERE 20 — <strong>Random numbers</strong></div>
</div>
<br>


<input type="text" class="hud-intro-name" maxlength="50" style="width: 100%;">
<br><br>
<button class="btn btn-green" style="width: 100%;" onclick="copyname();">COPY NAME</button>

肯定还有进一步简化和优化的空间（通过存储div节点本身而不是始终查询innerText来实现），但是思想是相同的。

Answer 2

您可以执行以下操作： 引入一个计数器变量，并在每次点击时增加其值。再次将其值设置为0，以实现圆形外观，即从后到前

var counter = 0;
function copyname() {
  var elems = document.getElementsByClassName("hud-leaderboard-party");
  var lastElem = elems[counter];
  document.getElementsByClassName("hud-intro-name")[0].value = lastElem.innerText;
  counter += 1;
  if (counter >= elems.length) {
  counter = 0;
  }
}

Answer 3

据我了解，您可以在div中获取所有文本。
每个div都有多个名称。因此，如果要获取名称列表而不是所有名称作为一个字符串，则需要使用String.split方法。这会让您在逗号上分开。

->x = "NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 "
"NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 "
->x.split(',')
(4) ["NAME HERE 1", " NAME HERE 2", " NAME HERE 3", " NAME HERE 4 "]

这与保留计数器变量一起使您可以一个一个地选择名称。
如果需要，还可以保留一个计数器变量，以便您在每次点击时选择不同的div。

Answer 4

您需要保留一个计数器并减少点击次数，将其重置为等于0的元素长度。

public function setMedia()
{
    parent::setMedia();
    $this->addCSS(_THEME_CSS_DIR_.'stores.css');

    if (!Configuration::get('PS_STORES_SIMPLIFIED')) {
        $api_key = (Configuration::get('PS_API_KEY')) ? 'key=' . Configuration::get('PS_API_KEY') . '&' : '';
        $default_country = new Country((int)Tools::getCountry());
        $this->addJS('http'.((Configuration::get('PS_SSL_ENABLED') && Configuration::get('PS_SSL_ENABLED_EVERYWHERE')) ? 's' : '').'://maps.google.com/maps/api/js?'.$api_key.'region='.substr($default_country->iso_code, 0, 2));
        $this->addJS(_THEME_JS_DIR_.'stores.js');
    }
}

  var elems = document.getElementsByClassName("hud-leaderboard-party");
  var counter = elems.length;
function copyname() {
  var lastElem;
  if(counter <= 0) 
     counter = elems.length;

   lastElem = elems[counter - 1];
  document.getElementsByClassName("hud-intro-name")[0].value = lastElem.innerText; 
  counter--;
 
}

Answer 5

如果您的所有名字都用逗号分隔，那么您可以执行以下操作。如果需要，也可以按空格定界。如果您在div中有其他内容（例如那些强标签中的内容），事情会变得有些棘手。

function copyname() {
  var nameArray = "";
  var inp = document.getElementById("inp");
  var elems = document.getElementsByClassName("hud-leaderboard-party");
  //
  if (elems) {
    for (x = 0; x < elems.length; x++) {
      var res = elems[x].innerHTML;
      res = res.replace("<strong>", "");
      res = res.replace("</strong>", "");
      nameArray = res.split(",");
      inp.value += nameArray;
    }
  }
}

<div class="hud-intro-leaderboard-parties">
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
  <div class="hud-leaderboard-party">NAME HERE 1, NAME HERE 2, NAME HERE 3, NAME HERE 4 — <strong>Random numbers</strong></div>
</div>
<br>


<input type="text" id="inp" class="hud-intro-name" maxlength="50" style="width: 100%;">
<br><br>
<button class="btn btn-green" style="width: 100%;" onclick="copyname();">COPY NAME</button>