0

我有一些 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">

有什么办法吗？

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 回答