0

ある種のループでRSSフィードを取り込むJavascript/PHPコードがあるので、コードの最初と最後にコードを書くことができます。（しかし、私が最初と最後に書くテキストは、おそらく毎回同じである必要があると思います。）

したがって、私が本当に必要としているのは、最初のliを除く他のすべてのliを非表示にし、次/前のボタンがクリックされたときにのみ表示するjavascriptです。ミニ1ページのアプリになるのでjqueryは使用したくないです（ただし、必要に応じて受け入れます！）

<img src="previous.jpg" onClick="javascript_to_go_to_previous_li">
<ul>
<li id="sameidasrest">Post 1</li>
<li id="sameidasrest">Post 2</li>
<li id="sameidasrest">Post 3</li>
<li id="sameidasrest">Post 4</li>
</ul>
<img src="next.jpg" onClick="javascript_to_go_to_next_li">

それを行う方法はありますか？

4

1 に答える 1

1

まず最初に、<ul>要素には実際に識別子を使用する必要があります。<li>次に、すべての要素に同じ ID を使用することはできません。すべての要素には独自の ID が必要です。または、HTML + CSS + JavaScript の組み合わせを使用して目標を達成することもできます。

HTML:
<ul id="myList" class="collapsed">
  <li>Post 1</li>
  <li>Post 2</li>
  <li>Post 3</li>
  <li>Post 4</li>
</ul>
<button id="btnTest">Click Me</button>

CSS:
ul.collapsed li:first-child {
  display:block;
}

ul.collapsed li {
  display:none;
}

JS:
document.getElementById('btnTest').addEventListener('click', function(){
  var list = document.getElementById('myList'),
      classes = list.className;
  if ( /collapsed/.test( classes ) ) {
    list.className = classes.replace( 'collapsed', '' );
  } else {
    list.className = classes + ' collapsed';
  }
});

http://jsfiddle.net/ragnarokkr/ZafdC/でテストできます。

この例では、リストとボタンを定義します。ボタンはスイッチのように機能します。クリックするたびに、リストは要素を表示および非表示にします。<ul>要素から CSS クラスを追加および削除するだけです。

または、jQuery などのフレームワークを使用することもできます。この場合、上記の JS を次のように変更できます。

$('#btnTest').on('click', function(){
  $('#myList').toggleClass('collapsed');
});

http://jsfiddle.net/ragnarokkr/cUYPq/でテストするコード

この例では、HTML+CSS と生の JavaScript を使用して、単一のリスト アイテムをインタラクティブに表示/非表示にします。

HTML:
<ul id="myList">
  <li class="show">Post 1</li>
  <li class="hide">Post 2</li>
  <li class="hide">Post 3</li>
  <li class="hide">Post 4</li>
</ul>

<button id="btnShowOne">Show Item</button>
<button id="btnHideOne">Hide Item</button>

CSS:
.hide {
  display: none;
}

.show {
  display: block;
}

JS:
function iterateAndToggleClass( elements, classNameFind, classNameReplace, isTopDown ) {
  if ( isTopDown ) {
    for ( var i = 0; i < elements.length; i++ ) {
      var element = elements[i];
      if ( element.className === classNameFind ) {
        element.className = classNameReplace;
        return;
      }
    }
  } else {
    for ( var i = elements.length - 1; i >= 0; i-- ) {
      var element = elements[i];
      if ( element.className === classNameFind ) {
        element.className = classNameReplace;
        return;
      }
    }
  }
}

document.getElementById('btnShowOne').addEventListener('click', function(evt){
  evt.preventDefault();
  evt.stopPropagation();

  var list = document.getElementById('myList'),
      items = list.getElementsByTagName('li');

  iterateAndToggleClass( items, 'hide', 'show', true );
});

document.getElementById('btnHideOne').addEventListener('click', function(evt){
  evt.preventDefault();
  evt.stopPropagation();

  var list = document.getElementById('myList'),
      items = list.getElementsByTagName('li');

  iterateAndToggleClass( items, 'show', 'hide', false );
});

もちろん、これは最適化されたコードではありませんが、十分に明確であることを願っています。http://jsfiddle.net/ragnarokkr/swGEY/でテストできます。

于 2013-01-14T21:05:50.057 に答える