2017-02-08 28 views
-1

マイページに表示/非表示スパンタグを入力しています。クリックするとその下の段落が表示され、もう一度クリックすると再び非表示になります。複数のクエリセレクタを使用して複数のクラスをループする

私は以前の要素すなわち上で複数のIDを設定することで、前にこれを行っている:

function pageLoad() { 
 
    display(); 
 
    noDisplay(); 
 
} 
 
function display() { 
 
    var here = document.getElementById('one'); 
 
    var more = document.getElementById('show') 
 

 
    function visible() { 
 
    more.style.display = 'block'; 
 
    here.style.display = 'none'; 
 
    } 
 
    here.addEventListener('click', visible); 
 
} 
 

 
function noDisplay() { 
 
    var hide = document.getElementById('hide'); 
 
    var less = document.getElementById('show'); 
 
    var more = document.getElementById('one'); 
 

 
    function inVisible() { 
 
    less.style.display = 'none'; 
 
    more.style.display = 'block'; 
 
    } 
 
    show.addEventListener('click', inVisible); 
 
} 
 

 
window.onload = pageLoad();
<p>Some Text</p> 
 
<span id="one"> Show more... </span> 
 
<p id="show" style="display: none;">Some more text... <br /><span id="hide">Less text</span></p>

をしかし、これはコードの多数の過度のラインにつながります。だから私はqueryselectorとそれをやってみましたが、私はこのファンクションで第2のqueryselectorを入力する場所を把握することはできません。ここに私の現在のコードは、それが動作しませんので、私は、どこ入力に2つ目のqueryselectorを理解していないので、それはエラーを返し、スニペットにあります:

function startUp() { 
 
    showText(); 
 
} 
 

 
function showText() { 
 
    var clicker = document.getElementsByClassName('display'); 
 
    var show = document.getElementsByClassName('showandhide'); 
 
    for (let i = 0; i < clicker.length; i++) { 
 
    clicker[i].addEventListener('click', function() { 
 
     if (clicker[i].querySelector('show').style.display == 'none') { 
 
     show.style.display = 'inline-block'; 
 
     } else 
 
     show.style.display = 'none'; 
 
    }); 
 
    }; 
 
} 
 

 
window.onload = startUp;
<p>Some Text</p><span class="display"> ...Continue reading... </span> 
 
<p class="showandhide">Some More Text...</p> 
 
<p>Some Text</p><span class="display"> ...Continue reading... </span> 
 
<p class="showandhide">Some More Text...</p> 
 
<p>Some Text</p><span class="display"> ...Continue reading... </span> 
 
<p class="showandhide">Some More Text...</p>

私は別の入力する必要がありますかforループ、2番目のqueryselectorどこか、または私はちょうどeventListenerの余分なテキストのクラスを表すためにclassNameを変更する必要がありますか? 複数のIDと過剰なコードの以前の方法ではなく、これをやってみるのはこれが初めてです。 forループとqueryselectorsを入れ子にしてGoogleで検索しても効果がありません。

+0

詳細を教えてください。 HTMLやJSにIDが表示されていません。また、そこには... – Ricky

+0

ああ、私は、あなたの現在のHTMLの一部を含む最初のスニペットを想定していました。気にしないで。 – Xufox

+1

あなたが表示したい段落に対応するクリック可能スパンの属性data-targetを使用します。そのスパンにクリックイベントをバインドし、データターゲット属性をチェックします。対応する要素のスタイルを設定します。 – Puzzle84

答えて

1

他の人が恩恵を受けるように... メンバーは、論理クラスに分割した後、ショークラスの2番目のループを配置するのに苦労しました。

function startUp() { 
 
    showText(); 
 
} 
 

 
function showText() { 
 
    var clicker = document.getElementsByClassName('display'); 
 
    var show = document.getElementsByClassName('showandhide'); 
 
    for (let i = 0; i < clicker.length; i++) { 
 
    clicker[i].addEventListener('click', function() { 
 
     for (let x = 0; x < show.length; x++) { 
 
     if (show[x].style.display == "none") { 
 
      show[x].style.display = 'inline-block'; 
 
     } else 
 
      show[x].style.display = 'none'; 
 
     }; 
 
    }); 
 
    }; 
 
} 
 
window.onload = startUp();
.showandhide { 
 
    display: none; 
 
}
<p>Some Text...</p><span class="display"> ...Continue reading... </span> 
 
<p class="showandhide">Some Other Text</p>

私は、「クリッカー」ループ内の「ショー」クラスをループしていたし、その後のスタイルを適用します。

+1

あなたが最初に持っていたHTMLは、表示スパンをクリックすると、すべての段落が開閉するようになります... –

+0

いいえ、クラス "display"を使って "span"タグをループしていましたが、 "p"タグのスタイルを変更できませんでした。私はもともと "show"クラスのループを扇動せずにqueryselectorを使用していたので、実際には "プロパティを読むことができません"というエラーを投げていました'of null – Ricky

+0

@MikeMcCaughan私はちょうどクラス "ショー"をループし、要素をスタイルする必要があった。私はちょうど "ショー"ループを配置する場所を把握できませんでした – Ricky

関連する問題