回复:获取内部Div内容
Re. Get inner Div content
我正试图在另一个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>
对不起,如果这个写得不好,不好的做法,在错误的地方或以前被问过。我还在学习。
不管怎样,谢谢你的光临。
当您为多个元素提供相同的id(在本例中为placeholder
)时,DOM只识别最后一个。在这种情况下,您应该将颜色选择功能修改为以下
function coloursel(elem) {
var colour = elem.firstChild.innerHTML;
alert(colour);
}
我认为问题是,你对所有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);
}
我还没有测试代码,但希望我能给你
将函数更改为:
function coloursel(elem) {
var colour = elem.children[0].innerHTML;
alert(colour);
}
你可能想考虑的其他一些事情:
- 正如许多人所说,你不止一次使用同一个id。这是不正确的HTML,甚至可能不需要ID
- 您在span标记中使用div标记。这也是不正确的。在div中使用span甚至可以减少所需的CSS数量
- 在HTML中放置"onclick"处理程序不是最佳做法。您需要使用PHP添加它,这意味着您要将前端代码库拆分为两个域。这使得以后更新代码变得更加困难,因为很难找到内容。您可以通过循环您的孩子并使用类似的东西以编程方式添加处理程序
相关文章:
- 将Div内容复制到文本区域或具有相同字体族样式的文本
- jQuery在5秒钟后隐藏/删除DIV内容
- 基于地理IP更改Div内容
- 如何使用Javascript替换和隐藏Div内容
- 用Div内容创建obj
- 使用CSS打印DIV内容,不起作用
- 筛选 DIV 内容
- 需要帮助-用数据库中的数据替换DIV内容而不刷新(使用-jquery、hmlhttp、CI)
- 将DIV内容复制到另一个DIV
- 单击时切换Div内容
- 使用不同的API参数更新DIV内容
- 通过Javascript在Div中动态插入Div内容
- 刷新 Div 内容(仅限本地.html)
- 基于多个可能的 DIV 内容的 JavaScript 操作
- 如何根据另一个 DIV 内容的可见性显示 DIV 内容
- 在 jQuery 文本区域中编辑 Div 内容
- 在 JQuery 对话框中隐藏和显示 Div 内容
- 如何获取本地页面DIV内容并发布
- 在 C# 或 JavaScript 中将 DIV 内容转换为图像
- 悬停打开 DIV 时,DIV 内容应从单独的 URL 动态加载