Question

您好我正在寻找在点击时切换某些文字和课程的最佳方式。我也将改变背景（后来生病了）

我有一个横幅，点击后我需要在p上切换一些文本和一个类（隐藏和显示）

我的一般思路如下（我知道js的最后两行不起作用）

实现这一目标的最佳方法是什么

<div class="banner">
     <div class="content-holder">
     <h2>xxxx</h2>
     <p>xxxxxx</p>
     <p class="hidden">xxxx</p>
     <button type="button" class="tell-more">Tell me more</button>
 </div>

$(".tell-more").on("click",function(){
    $(this).html($(this).html() == 'Tell me more' ? 'close' : 'Tell me more');
    $(".banner p.hidden").removeClass("hidden").addClass("show");
    $(".banner p.show").removeClass("show").addClass("hidden");
})

只是小提琴 http://jsfiddle.net/T3G42/

Answer 1

尝试使用.toggle()

$(".tell-more").on("click",function(){
    $('h2').toggle();
    $('p.hidden').toggle();
})

Answer 2

您可以设置特定的类，例如。 more用于更多文本段落，然后使用toggle切换其可见性。

代码：

$(".tell-more").on("click",function(){
    $(this).html($(this).html() == 'Tell me more' ? 'close' : 'Tell me more');
    $(".banner p.more").toggle();
})

演示：http://jsfiddle.net/BcJLR/

Answer 3

尝试

$(".tell-more").on("click", function () {
    $(this).html(function(i,html){
        return html == 'Tell me more' ? 'close' : 'Tell me more'
    });
    $(this).prev().toggleClass("hidden show");
})

演示：Fiddle

切换文本和类

3 个答案: