Jquery 或 javascript 显示隐藏文本答案

【问题标题】：Jquery or javascript to show hidden textJquery 或 javascript 显示隐藏文本
【发布时间】：2015-06-14 20:01:44
【问题描述】：

我正在尝试改变这个：

Item1 ShowMore<br>
Item2 ShowMore<br>
Item3 ShowMore<br>

进入

Item1 hidden text<br>
Item2 more hidden text<br>
Item3 even more text<br>

所以当我点击 ShowMore 时，我需要显示隐藏的文本，而 ShowMore 必须在按下时消失。

我还有数百行我会使用它，如果有办法在不为每个元素提供唯一 id 的情况下实现这一点，我会徘徊。

我在这里找到了一个可行的解决方案，但它做相反的事情，它隐藏了文本...http://w3schools.invisionzone.com/index.php?showtopic=49205（第二篇文章）

【问题讨论】：

请给我们看一些你的代码，以便我们改进它。
抱歉，在编辑器中看起来不错，我没有检查预览...
这个问题太模糊了。你怎么知道隐藏的文字是什么？提供html。提供您如何尝试使用 javascript 或 jquery 执行此操作，并告诉我们您遇到了哪些错误，您不知道如何修复。

标签： javascript jquery html

【解决方案1】：

希望你正在寻找这个..

HTML

<p>Blablabla1 <span class="showhide">ShowMore</span> Blablabla2 <span class="showhide">ShowMore</span> Blablabla3 <span class="showhide">ShowMore</span></p>

CSS

.showhide {
    color:red;
    cursor:pointer;
}

脚本

$(".showhide").click(function () {
    if ($(this).text() == "ShowMore") {
        $(this).text("HiddenText");
    } else {
        $(this).text("ShowMore");
    }
});

Fiddle Demo

Try this

【讨论】：

所有这一切都是改变一些硬编码的按钮文本......这如何回答问题？
是的，在我多测试了一下之后，我注意到了同样的事情...... Raoulito 的解决方案非常有效

【解决方案2】：

有数百种方法可以为此创建函数。如果您以巧妙的方式编写代码，您可以让它变得非常简单。

这是一个例子：https://jsfiddle.net/3250pzbz/

HTML：

First sentance: <em>Show More</em><span class="hidden">That's a hidden sentance.</span>
Second sentance: <em>Show More</em><span class="hidden">That's another hidden sentance.</span>
Third sentance: <em>Show More</em><span class="hidden">And so on…</span>

和 jQuery：

$(document).ready(function(){
    $('.hidden').hide(); // 1. hide all elements with class="hidden"
    $('em').click(function(){ // 2. when click on any <em>
        $(this).hide().next('.hidden').show(); // 3. hide the em you clicked on — 4. show the next element with class="hidden"
    });
});

我建议您发布代码示例，这里的人将能够更准确地帮助您。

【讨论】：