リストから選択したアイテムを1つだけ表示/非表示する方法

Question

私の記事リストに問題があります。私は "もっと見る"ボタンを作成したいが、 "もっと..."をクリックしたときに作成したコードを使って、最新のフィードのみを表示したい。多分あなたはそれを動作させる方法をいくつか考えているでしょうか？

var content = document.getElementById('visibleContent').value + '<span id="more_text">' + document.getElementById('readMoreContent').value + '</span>', 


function addArticle() { 
    var container = document.getElementById('article-content'); 
    var html = '<ul>'; 
    for (var i = 0; i < data.length; i++) { 
    html += '<li> <div class="demo-card-wide mdl-card mdl-shadow--2dp"> <div id="articleHeader'+i+'" class="mdl-card__title articleHeader"> <h2 id="articleTitle" class="mdl-card__title-text">' + data[i].doc.title + '</h2></div> <div id="articleContent" class="mdl-card__supporting-text item">' + data[i].doc.content + ' </div> <div class="mdl-card__actions mdl-card--border"> <button id="read_more" onclick="return showMore()" class="mdl-button mdl-js-button mdl-button--primary"> More... </button> <p id="time">' + data[i].doc.time + '</p><div class="mdl-card__menu"> <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> <i class="material-icons">share</i> </button> </div> </li>' 
    } 
    html += '</ul>' 

    container.innerHTML = html; 
} 

function showMore() { 
    var text = document.getElementById('more_text'); 
    if (text.style.display === "block") { 
    text.style.display = "none"; 
    } else { 
    text.style.display = "block"; 
    } 
} 

Answer 1

あなたは同じid値を持つ複数の要素を持つことはできません。要素のすべて が同じidを持っている場合は、最後の要素 には、idが適用されます。 idの値の末尾に数字を追加する必要があります。この場合、 は、どの要素を制御するかを決定するときに、その要素でイベント がトリガーされたときにid this.idを指定できます。

これは、上で説明した方法を使用しています。これを行うには遠い方法があります。多分あなた自身でそれを強化するでしょう。

function showMore(idval) { 
 
    var text = document.getElementById('read_more_'+idval); 
 
    if (text.style.display === "block") { 
 
    text.style.display = "none"; 
 
    } else { 
 
    text.style.display = "block"; 
 
    } 
 
}

<div id="articleContent">Some content</div> 
 
<button onclick="showMore(this.id);" id="x1">Toggle More...</button> 
 
<div id="read_more_x1" style="display:none;">test 1</div> 
 
<hr> 
 
<div id="articleContent">Some content</div> 
 
<button onclick="showMore(this.id);" id="x2">Toggle More...</button> 
 
<div id="read_more_x2" style="display:none;">test 2</div> 
 
<hr> 
 
<div id="articleContent">Some content</div> 
 
<button onclick="showMore(this.id);" id="x3">Toggle More...</button> 
 
<div id="read_more_x3" style="display:none;">test 3</div>

あなたのポストに合わせて、また

は、以下のループ変数 iをインクリメントする方法の例です。

var text = '<div id="articleContent" class="mdl-card__supporting-text item">Some content </div> 
<button onclick="showMore(this.id);" id="x'+i+'" class="mdl-button mdl-js-button mdl-button--primary"> Toggle More... </button> 
<div id="read_more_x'+i+'" style="display:none;">test '+i+'</div>'