JS関数を複数の要素に適用する

複数の段落要素に同じJavaScriptとAJAXコードを使用しようとしています。パラグラフの内容（innerHTML）をPHPの入力パラメータとして取得する必要があります。しかし、あなたが見ることができるように、コードはpタグのidまたはクラス名に依存しています。私はそれがただ一つの例で動作することを知っています。どのように私はそれを多くの例のために働かせるのですか？ここでは、コード JS関数を複数の要素に適用する

<style> 
#popup-header, #popup-body{ 
    font-family:Arial; 
    font-size:14px;  
    visibility:hidden; 
} 
#popup-body{ 
    height:270px; 
    width:300px; 
    background-color:#CCC; 
    padding-left:10px; 
    padding-top:10px; 
    border-radius:0 0 6px 6px; 
} 
#popup-header{ 
    height:30px; 
    width:300px; 
    padding-left:10px; 
    padding-top:10px; 
    color:white; 
    background-color:#0000CC; 
    border-radius;6px 6px 0 0; 
} 
#popup{ 
    width:300px; 
    height:300px; 
    background-color:#CCC 
    visibility:hidden; 
    border-radius;6px 6px 0 0; 

} 
</style> 
<body> 
<script> 
function mOut(obj) { 
    //obj.innerHTML = myElement.innerHTML; 
    document.getElementById("popup").style.visibility = 'hidden'; 
    document.getElementById("popup-header").style.visibility = 'hidden'; 
    document.getElementById("popup-body").style.visibility = 'hidden'; 
} 

function mOver(obj) { 
    var myElement = document.getElementsByClassName("demo"); 
    var xhttp; 
    if (window.XMLHttpRequest) { 
    // code for modern browsers 
    xhttp = new XMLHttpRequest(); 
    } else { 
    // code for IE6, IE5 
    xhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     document.getElementById("popup").style.visibility = 'visible'; 
    document.getElementById("popup-header").style.visibility = 'visible'; 
    document.getElementById("popup-body").style.visibility = 'visible'; 
    document.getElementById("popup-header").innerHTML =  myElement.innerHTML; 
    document.getElementById("popup-body").innerHTML = this.responseText; 
    } 
    }; 
    xhttp.open("GET", "getVerse.php?q="+myElement.innerHTML, true); 
    xhttp.send(); 
} 
</script> 
<p class="demo" onmouseout="mOut(this)" onmouseover="mOver(this)">Matthew 5:12</p> 
<p class="demo" onmouseout="mOut(this)" onmouseover="mOver(this)">Matthew 5:13</p> 
<div id="popup"> 
    <div id="popup-header"></div> 
    <div id="popup-body"></div> 
</div> 
</body> 
</html>

出典

2017-04-09 Matt Bastin

-1

はこれが事のjQueryの種類がために設計された正確です。

段落オブジェクトを選択してからforeachを呼び出すことができます。

$('P').each(function() { 
    var innerHTML = $(this).html(); 
    //dostuff 
});

出典

2017-04-09 09:23:58

あなたはすでにイベントが起こっされているElementオブジェクトを渡しているので、

var myElement = obj;

で

var myElement = document.getElementsByClassName("demo");

を交換する必要があります。

出典

2017-04-09 09:24:07 gurvinder372

現在の要素のinnerHTMLを引数としてとり、関数mOver（this.innerHTML）を呼び出すように関数を変更することができます。

出典

2017-04-09 10:13:49 noonlit

JS関数を複数の要素に適用する

答えて

関連する問題