回覆。获取内部 Div 内容

Question

我正在尝试获取另一个 div 中 Div 的内容。基本上我已经使用 php 创建了一个动态颜色 'picker' 并且我想添加内部 div 的内容，即。单击相关颜色时将颜色名称添加到 javascript 变量。

看看这支笔

function coloursel() {

  var colour = document.getElementById("patchholder").firstChild.innerHTML;

  alert(colour);
}

/* shirt color name display style*/


#patchhome {
 position:relative;
 bottom:240px;
 display:inline-block;
 font-size: 13px;
 margin:3px;
}

#patchhome  p{
 font-size: 10px;
 margin-bottom:5px;
 display:inline-block;
}


#patchhome  h2{
 margin-left:-3px;
 
}

.colourname{ 
 white-space:nowrap;
 display:none; 
 position:absolute;
 top :145px;
 float:right;
 right:-3px;
}

.patchholder{
 float:left;
 font-size: 0;
 position:relative;
 display:inline-block;
 margin:2px;
 height:16px;
 width:16px;
}

.patchholder:hover + div{ 
 display:inline-block; 
 margin:1px;
 float:left;
}

<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Antique Cherry"  style="background:#971B2F;display:inline-block;"/><div id="colourname"class="colourname">Antique Cherry</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Cherry Red"  style="background:#AC2B37;display:inline-block;"/><div id="colourname"class="colourname">Cherry Red</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Daisy"  style="background:#FED141;display:inline-block;"/><div id="colourname"class="colourname">Daisy</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Forrest Green"  style="background:#273B33;display:inline-block;"/><div id="colourname"class="colourname">Forrest Green</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Orange"  style="background:#FF8D6D;display:inline-block;"/><div id="colourname"class="colourname">Heather Orange</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Black"  style="background:#000000;display:inline-block;"/><div id="colourname"class="colourname">Black</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="White"  style="background:#FFFFFF;display:inline-block;"/><div id="colourname"class="colourname">White</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Navy"  style="background:#002A5C;display:inline-block;"/><div id="colourname"class="colourname">Navy</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heliconia"  style="background:#DB3E79;display:inline-block;"/><div id="colourname"class="colourname">Heliconia</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Kiwi"  style="background:#A3A76D;display:inline-block;"/><div id="colourname"class="colourname">Kiwi</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Orange"  style="background:#DF6426;display:inline-block;"/><div id="colourname"class="colourname">Orange</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Royal"  style="background:#224D8F;display:inline-block;"/><div id="colourname"class="colourname">Royal</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Sport Grey"  style="background:#AFAFAF;display:inline-block;"/><div id="colourname"class="colourname">Sport Grey</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Irish Green"  style="background:#00966C;display:inline-block;"/><div id="colourname"class="colourname">Heather Irish Green</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Cardinal"  style="background:#8D2838;display:inline-block;"/><div id="colourname"class="colourname">Cardinal</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Chestnut"  style="background:#83635C;display:inline-block;"/><div id="colourname"class="colourname">Chestnut</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="DK Chocolate"  style="background:#423238;display:inline-block;"/><div id="colourname"class="colourname">DK Chocolate</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Military Green"  style="background:#7E7F74;display:inline-block;"/><div id="colourname"class="colourname">Heather Military Green</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Purple"  style="background:#614B79;display:inline-block;"/><div id="colourname"class="colourname">Heather Purple</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Indigo Blue"  style="background:#486D87;display:inline-block;"/><div id="colourname"class="colourname">Indigo Blue</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Light Blue"  style="background:#A3B3CB;display:inline-block;"/><div id="colourname"class="colourname">Light Blue</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Purple"  style="background:#3F2A56;display:inline-block;"/><div id="colourname"class="colourname">Purple</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Sand"  style="background:#CABFAD;display:inline-block;"/><div id="colourname"class="colourname">Sand</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Antique Heliconia"  style="background:#AA0061;display:inline-block;"/><div id="colourname"class="colourname">Antique Heliconia</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Charcoal"  style="background:#66676C;display:inline-block;"/><div id="colourname"class="colourname">Charcoal</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Cobalt"  style="background:#374393;display:inline-block;"/><div id="colourname"class="colourname">Cobalt</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="DK Heather"  style="background:#3F4444;display:inline-block;"/><div id="colourname"class="colourname">DK Heather</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Navy"  style="background:#333F48;display:inline-block;"/><div id="colourname"class="colourname">Heather Navy</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Heather Royal"  style="background:#307FE2;display:inline-block;"/><div id="colourname"class="colourname">Heather Royal</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Irish Green"  style="background:#009E69;display:inline-block;"/><div id="colourname"class="colourname">Irish Green</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Military Green"  style="background:#63655A;display:inline-block;"/><div id="colourname"class="colourname">Military Green</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Red"  style="background:#B1302A;display:inline-block;"/><div id="colourname"class="colourname">Red</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Sapphire"  style="background:#0077B5;display:inline-block;"/><div id="colourname"class="colourname">Sapphire</div></span>


<span class="patchholder"id="patchholder" onclick="coloursel(this)" title="Antique Sapphire"  style="background:#006A8E;display:inline-block;"/><div id="colourname"class="colourname">Antique Sapphire</div></span>

对不起，如果这个写得不好，不好的做法，在错误的地方或之前被问过。我还在学习中。

感谢您的观看。

Answer 1

当您为多个元素赋予相同的 id（在本例中为 placeholder）时，只有最后一个元素被 DOM 识别。在这种情况下，您应该将 coloursel 函数修改为以下内容

         function coloursel(elem) {
              var colour = elem.firstChild.innerHTML;

              alert(colour);
          }

Answer 2

我认为问题是你对所有 div 都有相同的 id，你应该调用每个 div somethink like patchholder1, patchholder2 等等，在 onclick 中你可以通过颜色选择器的数量，

<span class="patchholder"id="patchholder1" onclick="coloursel(this,1)" title="Antique Cherry"  style="background:#971B2F;display:inline-block;"/><div id="colourname"class="colourname">Antique Cherry</div></span>

然后在 javascript 中，您应该使用此

更改您的代码

function coloursel(var idN) {
  var divId= "patchholder";
  var uniqueId = divId.concat(idN);
  var colour = document.getElementById(uniqueId).firstChild.innerHTML;

  alert(colour);
}

我还没有测试代码，但希望我能给你思路

Answer 3

将您的函数更改为：

function coloursel(elem) {

  var colour = elem.children[0].innerHTML;

  alert(colour);
}

您可能需要考虑的其他一些事情：

正如许多人所说，您不止一次使用同一个 ID。这是不正确的 HTML，甚至可能不需要 ID。
您正在 span 标签内使用 div 标签。这也是不正确的。在 divs 内使用 span 甚至可以让您减少所需的 CSS 数量。
将 'onclick' 处理程序放在 HTML 中不是最佳做法。您需要使用 PHP 添加它，这意味着您要将 front-end 代码库拆分到两个域中。这使得以后更新代码变得更加困难，因为事情更难找到。您可以通过循环 children 并使用类似 this

回覆。获取内部 Div 内容

Re. Get inner Div content

html

javascript

get