複数の非表示/表示のテキスト

Question

こんにちは、私は複数の隠れた/私のワードプレスサイトのためのより多くのコーディングを表示する方法をお尋ねしたいと思います。下記のコードで問題が発生しています。ソースが混在しています。どのように私は2つを区別するのですか？助けてください、ありがとう！

--Script1-- 
<script language="javascript"> 
function toggle() { 
var ele = document.getElementById("toggleText"); 
var text = document.getElementById("displayText"); 
if(ele.style.display == "block") { 
ele.style.display = "none"; 
text.innerHTML = "Click here for complete details."; 
} 
else { 
ele.style.display = "block"; 
text.innerHTML = "Hide details."; 
} 
} 
</script><a id="displayText" href="javascript:toggle();">Click here for complete details.</a> 
<div id="toggleText" style="display: none">Details</div> 
</span> 

--Script2-- 
<script language="javascript"> 
function toggle() { 
var ele = document.getElementById("toggleText"); 
var text = document.getElementById("displayText"); 
if(ele.style.display == "block") { 
ele.style.display = "none"; 
text.innerHTML = "Click here for more information."; 
} 
else { 
ele.style.display = "block"; 
text.innerHTML = "Hide Disclaimer."; 
} 
} 
</script><a id="displayText" href="javascript:toggle();">Click here for more information.</a> 
<div id="toggleText" style="display: none">Information</div> 
</span> 

Answer 1

変更functionとidの名前。 この回答が役に立ちそうですか？ JavaScriptで

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script language="javascript"> 
 
function toggle() { 
 
var ele = document.getElementById("toggleText"); 
 
var text = document.getElementById("displayText"); 
 
if(ele.style.display == "block") { 
 
ele.style.display = "none"; 
 
text.innerHTML = "Click here for complete details."; 
 
} 
 
else { 
 
ele.style.display = "block"; 
 
text.innerHTML = "Hide details."; 
 
} 
 
} 
 
</script><a id="displayText" href="javascript:toggle();">Click here for complete details.</a> 
 
<div id="toggleText" style="display: none">Details</div> 
 
</span> 
 

 
--Script2-- 
 
<script language="javascript"> 
 
function toggle1() { 
 
var ele = document.getElementById("toggleText1"); 
 
var text = document.getElementById("displayText1"); 
 
if(ele.style.display == "block") { 
 
ele.style.display = "none"; 
 
text.innerHTML = "Click here for more information."; 
 
} 
 
else { 
 
ele.style.display = "block"; 
 
text.innerHTML = "Hide Disclaimer."; 
 
} 
 
} 
 
</script><a id="displayText1" href="javascript:toggle1();">Click here for more information.</a> 
 
<div id="toggleText1" style="display: none">Information</div> 
 
</span>

Answer 2

、同じ名前を持つ第二の方法を追加すると、以前のものを交換してください。

代わりに、関数にパラメータを追加し、呼び出し時に渡す必要があります。

function toggle(ele) { 
 
\t var text = ele.nextElementSibling; 
 
\t if (text.style.display == "block") { 
 
\t \t text.style.display = "none"; 
 
\t \t ele.innerHTML = ele.getAttribute('data-initial-text'); 
 
\t } else { 
 
\t \t text.style.display = "block"; 
 
\t \t ele.innerHTML = ele.getAttribute('data-hide-text'); 
 
\t } 
 
}

<a data-initial-text='Click here for complete details.' data-hide-text='Hide details.' href="javascript:;" onclick="toggle(this);">Click here for complete details.</a> 
 
<div style="display: none">Details</div> 
 

 
<a data-initial-text='Click here for more information.' data-hide-text='Hide Disclaimer.' href="javascript:;" onclick="toggle(this);">Click here for more information.</a> 
 
<div style="display: none">Information</div>

Answer 3

あなたはIDが一意でなければなりませんよう要素ごとに異なるIDを与える必要があります。また、異なる関数名を定義することもできます。

コードの下に試してみてください：

function toggle1() { 
    var ele = document.getElementById("toggleText1"); 
    var text = document.getElementById("displayText1"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "Click here for complete details."; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "Hide details."; 
    } 
} 
</script> 
<a id="displayText1" href="javascript:toggle1();">Click here for complete details.</a> 
<div id="toggleText1" style="display: none">Details</div> 


<script language="javascript"> 
function toggle2() { 
    var ele = document.getElementById("toggleText2"); 
    var text = document.getElementById("displayText2"); 
    if(ele.style.display == "block") { 
     ele.style.display = "none"; 
     text.innerHTML = "Click here for more information.111"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "Hide Disclaimer.111"; 
    } 
} 
</script> 
<a id="displayText2" href="javascript:toggle2();">Click here for more information.</a> 
<div id="toggleText2" style="display: none">Information</div>