在页面上多次隐藏/显示
[英]Hide/Show multiple times on a page
问题描述
First of all, I know that this question has been answered on this site numerous times and that is the main problem here. 
首先，我知道这个问题已经多次在这个网站上得到解答，这是这里的主要问题。 I am spoiled for choice in the answers and have been searching for a few hours, not finding anything directly similar. 我在答案中被选中，并且已经搜索了几个小时，没有找到任何直接相似的东西。 There must be plenty of ways to do this, but what I have right now is closest to what I want. 必须有很多方法可以做到这一点，但我现在所拥有的最接近我想要的。
I have this for my code at the moment, for some reason the fiddle won't work, while it works fine in my code, must have missed something. 我现在为我的代码提供了这个，由于某种原因，小提琴不起作用，而它在我的代码中工作正常，一定是错过了一些东西。
http://jsfiddle.net/PVLMX/ http://jsfiddle.net/PVLMX/
Html: HTML：
<div id="wrap">
<p>This text is visible, but there is more.<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;"><br/><br/>See more >></a>
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below
will hide this content again.</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content >></a></p>
</div>
</div>
Javascript: 使用Javascript：
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
I need to be able to call the function for each new "Read More" on the page. 我需要能够为页面上的每个新“Read More”调用该函数。 At the moment, the first "See More" is always the target of the javascript, and I am not sure how to call this function for other links on the page. 目前，第一个“查看更多”始终是javascript的目标，我不知道如何为页面上的其他链接调用此函数。
4 个解决方案
解决方案1
5 已采纳 2014-03-19 03:46:54
In HTML, each id="" must be a unique identifier, you can't put two id="example" so you need id="example" and id="example2" and so on. 在HTML中，每个id =“”必须是唯一的标识符，你不能把两个id =“example”所以你需要id =“example”和id =“example2”等等。
Working jsfiddle: http://jsfiddle.net/PVLMX/2/ 工作jsfiddle： http ： //jsfiddle.net/PVLMX/2/
<div id="wrap">
<p>This text is visible, but there is more.<a href="#" id="example2-show"
class="showLink" onclick="showHide('example2');return false;"><br/><br/>See more >></a>
</p>
<div id="example2" class="more">
<p>This text was hidden, now you see it</p>
<p><a href="#" id="example2-hide" class="hideLink"
onclick="showHide('example2');return false;">Hide this content >></a></p>
</div>
</div>
What I changed: 我改变了什么：
- every id="example.. to id="example2... in the second div. 每个id =“example .. to id =”example2 ...在第二个div中。
- load the script in "No wrap - in head" mode (jsfiddle left option) 在“No wrap-in head”模式下加载脚本（jsfiddle left选项）
解决方案2
1 2014-03-19 03:47:04
In your fiddle you need to select the no wrap in <head> option. 在你的小提琴中你需要no wrap in <head>选项中选择no wrap in <head> 。 Your code works fine. 你的代码运行正常。
http://jsfiddle.net/uND9H/ http://jsfiddle.net/uND9H/
Aslo you can't have duplicate id's 你不能有重复的id
解决方案3
1 2014-03-19 04:09:46
if you want to generalise this, there is a much easier way in jquery ie by using class you can bind click events and generalise them using class names. 如果你想概括一下，在jquery中有一个更容易的方法，即通过使用类，你可以绑定点击事件并使用类名来概括它们。 Here is an example , Check it out 这是一个例子，检查出来
$('.showLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-show","-hidden");
$('#'+name).css('display', 'inline-block');
});
$('.hideLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-hide","-hidden");
$('#'+name).css('display', 'none');
});
http://jsfiddle.net/AmarnathRShenoy/AMf8y/ http://jsfiddle.net/AmarnathRShenoy/AMf8y/
You can use class names multiple times and you must always remeber that id can never be duplicated 您可以多次使用类名，并且必须始终记住，永远不能复制id
解决方案4
1 2014-03-19 04:21:59
Actually you can do it with jquery and much easier than you think 实际上你可以用jquery做到这一点并且比你想象的要容易得多
Jquery as follows: Jquery如下：
$more = $('.more');
$('.showLink').click(function(e){
e.preventDefault();
$more.show();
})
$('.hideLink').click(function(e){
e.preventDefault();
$more.hide();
})
Also add a css style to display:none on .more class. 还要在.more类上添加一个css样式来显示：none。 you can make it look a little nicer with slideToggle() 你可以用slideToggle（）让它看起来更好一些
Here is a fiddle: http://jsfiddle.net/up36g/ 这是一个小提琴： http ： //jsfiddle.net/up36g/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.