[英]Display Next 'LI' in javascript - Same titled 'LI'
I have some Javascript/PHP code that brings in a RSS feed in a kind of loop so I can write some code at the start and end of it. 我有一些Javascript / PHP代码以某种循环的形式引入RSS提要,因此我可以在其开头和结尾编写一些代码。 (But I guess the text I write at the start and end will probably need to be the same each time.) (但是我想我在开始和结尾处写的文本可能每次都必须相同。)
So what I really need is some javascript to hide all the other li's except the first, and only display them when the next/previous buttons are clicked. 因此,我真正需要的是一些JavaScript来隐藏除第一个以外的所有其他li,并仅在单击next / previous按钮时显示它们。 I would prefer to not use jquery as its going to be a mini 1 page app (But will accept if needs must!) 我宁愿不使用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">
Any way of doing that? 有什么办法吗?
First thing first, you should really use an identifier for your <ul>
element. 首先,您应该为<ul>
元素真正使用一个标识符。 Then, you can't use the same ID for all your <li>
elements. 然后,您不能对所有<li>
元素使用相同的ID。 Every element has to have its own ID or, even better, you can use a combination of HTML + CSS + JavaScript to reach your goal. 每个元素都必须具有自己的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';
}
});
You can test it at http://jsfiddle.net/ragnarokkr/ZafdC/ 您可以在http://jsfiddle.net/ragnarokkr/ZafdC/中对其进行测试
In this example I define the list and a button. 在此示例中,我定义了列表和按钮。 The button works like a switch. 该按钮就像一个开关。 Every time you click it, the list shows and hides the elements. 每次单击它时,列表都会显示和隐藏元素。 All simply adding and removing a CSS class from the <ul>
element. 所有这些都简单地从<ul>
元素添加和删除CSS类。
Alternatively, you can use some framework such as jQuery, and in this case you can change the JS above in: 或者,您可以使用某些框架,例如jQuery,在这种情况下,您可以在以下位置更改上面的JS:
$('#btnTest').on('click', function(){
$('#myList').toggleClass('collapsed');
});
The code to test it at http://jsfiddle.net/ragnarokkr/cUYPq/ 在http://jsfiddle.net/ragnarokkr/cUYPq/上进行测试的代码
This example is to interactively show/hide single list items using HTML+CSS and bare JavaScript: 此示例使用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 );
});
Of course this is not optimized code, but I hope it's clear enough. 当然,这不是经过优化的代码,但我希望它足够清楚。 You can test it at http://jsfiddle.net/ragnarokkr/swGEY/ 您可以在http://jsfiddle.net/ragnarokkr/swGEY/进行测试
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.