0

私の質問の前に、Web デザインについての私の理解が限られていることを述べさせてください。

「-More-」テキストをクリックすると「-Less-」になり、もう一度クリックすると「-More-」に戻ります。

変更しようとしているコード内に既にいくつかの JavaScript が存在しています。これは、同じ結果を達成するために私が求めているものと組み合わせることができますか?

次のように私のJavaScript：

function showHide(shID) {
  if (document.getElementById(shID)) {
    if (document.getElementById(shID+'-show').style.display != 'none') {
        document.getElementById(shID+'-show').style.display = 'none';
        document.getElementById(shID).style.display = 'block';
    }
    else {
        document.getElementById(shID+'-show').style.display = 'inline';
        document.getElementById(shID).style.display = 'none';
    }
  }
}

次のように私のhtml：

  <div class="accordion">
    <p>1. Decide
    <a href="#" id="exampleone-show" class="showLink"
    onclick="showHide('exampleone');return false;"><div class="btn_show">-More-</div></a>
    <p></p>
  </div>
  <div id="exampleone" class="more">
    <p>Blah Blah Blah.</p>
  </div>

前もって感謝します。

4

2 に答える 2

3

この関数を実行するのに jQuery は必要ありません。jQuery を使用すると、スクリプト全体が煩雑になり、処理が遅くなります。この純粋な JavaScript ソリューションを使用するだけです。

function showHide(i) {
if (document.getElementById("example"+i).innerHTML=="-More-") {
    document.getElementById("example"+i).innerHTML="-Less-";
    document.getElementById("more"+i).style.display = 'block';
}
else if (document.getElementById("example"+i).innerHTML=="-Less-"){
    document.getElementById("example"+i).innerHTML="-More-";
    document.getElementById("more"+i).style.display = 'none';
}
}

このコードは、どの link/を変更する必要があるiかを定義するパラメーターとして使用します。divHTML には、これを使用します。

<div class="accordion">
<p>1. Decide</p>
    <a href="#" id="**example1**" class="showLink" onclick="**showHide(1)**">-More-</a>
</div>
<div id="**more1**" class="more" style="display:none;">
    <p>Blah Blah Blah.</p>
</div>

基本的に、この HTML コードを必要な回数だけコピーし続けることができます。コードの二重アスタリスクの部分を変更するようにしてください。(JavaScript コードは、example1や などのID を識別することによって機能しexample2ます。この番号を に渡すことshowHide()で、コードを複数のインスタンスに使用できます。)

ここにあなたのための JSFiddle があります: http://jsfiddle.net/3Xawv/

于 2012-12-21T03:17:02.387 に答える
0

本当の答えは jQuery を使用することですが、次のようにしてクリック イベントを渡すこともできます。

 <a href="#" id="exampleone-show" class="showLink"
onclick="showHide('exampleone', event);return false;">

そしてJS側で

function showHide(shID, e) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID + '-show').style.display != 'none') {
            document.getElementById(shID + '-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        } else {
            document.getElementById(shID + '-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
    target = e.target;
    element = target.getElementsByClassName('btn_show');
    html = element.innerHTML;
    element.innerHTML = "";
    if (html.indexOf("-More-") != -1) {
        element.innerHTML = "-Less-";
    } else if (html.indexOf("-Less-") != -1) {
        element.innerHTML = "-More-";
    }
}​

明確化: e.target は、クリック イベントを実際に受け取った要素 (この場合はリンク) を返します。

于 2012-12-21T02:24:59.533 に答える