回覆。 獲取內部Div內容

Question

我正在嘗試在另一個div中獲取Div的內容。 基本上，我使用php創建了動態顏色“ picker”，並且我想添加內部div的內容。 單擊相關顏色后，將顏色名稱更改為javascript變量。

簽出這支筆

http://codepen.io/anon/pen/oXopmq

 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打電話，例如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標簽。 這也是不正確的。 在div內使用span甚至可能使您減少所需的CSS數量。
• 在HTML中放置“ onclick”處理程序不是最佳做法。 您將需要使用PHP添加它，這意味着您要將前端代碼庫拆分到兩個域中。 這使得以后很難更新代碼，因為事情很難找到。 您可以以編程方式通過您的孩子和循環使用類似處理程序添加到該