Question

我有一些Javascript / PHP代码在一种循环中引入RSS提要，所以我可以在它的开头和结尾写一些代码。（但我想我在开头和结尾写的文字可能每次都需要相同。）

所以我真正需要的是一些javascript来隐藏除第一个之外的所有其他li，并且仅在单击下一个/上一个按钮时显示它们。我宁愿不使用jquery作为一个迷你1页的应用程序（但如果需要必须接受！）

<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">

这样做的任何方式？

Answer 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/

进行测试

在javascript中显示下一个'LI' - 标题为'LI'

1 个答案: