javascript - 将数据从 div 标签传递到 javascript 函数

Question

HTML

<li id="a1">
    <div><p>Some Text1!</p></div>
    <div><a href="#"></a>Some Text2!</div>  
    <div><input id="a1b" type="button" onClick="fun()"/></div>      
</li>

我怎样才能得到Some Text1!和Some Text2!，即来自第一个和第二个的一些文本div并将其传递给fun()第三个函数div？

Answer 1

为他们分配一个 ID 并用于document.getElementById访问

<li id="a1">
    <div><p id="text1">Some Text1!</p></div>
    <div id="text2"><a href="#"></a>Some Text2!</div>  
    <div><input id="a1b" type="button" onClick="fun(document.getElementById('text1').innerText,document.getElementById('text2').innerText)"/></div>      
</li>

你的fun功能：

function fun(text1,text2){

}

Answer 2

给 div 加上Some Text1!and Some Text2!an idor a class。这样，您可以执行以下操作：

通过 ID：

<li id="a1">
    <div id="text1"><p>Some Text1!</p></div>
    <div id="text2"><a href="#"></a>Some Text2!</div>  
    <div><input id="a1b" type="button" onClick="fun()"/></div>
</li>

<script>
function fun()
{
      var text1 = document.getElementById("text1");
      var text2 = document.getElementById("text2");

      //do stuff with text1 and text2. E.g.: alert them:
      alert(text1.innerHTML);
      alert(text1.innerHTML);
}

并通过类做到这一点：

<li id="a1">
    <div class="identify"><p>Some Text1!</p></div>
    <div class="identify"><a href="#"></a>Some Text2!</div>  
    <div><input id="a1b" type="button" onClick="fun2('identify')"/></div>      
</li>

function fun2(matchClass)
{
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
            > -1) 
    {
        //do stuff with the elements. E.g.: Alert them:
        alert(elems[i].innerHTML);
    }
}
</script>

参考：

https://stackoverflow.com/a/3808886/866930

Answer 3

var divEle[] = document.getElementById("a1").childNodes;

for(var i=0; i<divEle.length;i++)
{
    console.log(divEle[i].firstChild.innerHTML);
}

这将在 div 元素中打印内部文本。

您可以定义如下函数：

divELe[2].setAttribute("onclick", "function("+divEle[0].firstChild.innerHTML+","+divEle[1].firstChild.innerHTML+")");