Question

尝试创建一个用户单击按钮的简单函数，它会显示一个表单并更改按钮上的文本。当他们再次点击它时，表单隐藏，按钮文本变回原来的状态。

这是我到目前为止所做的：

$('a.subscribe').click(function() {
var link = $(this);
$('.intro_cta form').toggle(function(){
    if ($(this).is(':visible')) {
        $('a.enter').css('display','none');
        link.text('CLOSE');

    } else {
        link.text('SUBSCRIBE'); 
        $('a.enter').css('display','block');
    }     
}); 
});

HTML标记：

<a href="#" class="subscribe button white">SUBSCRIBE</a>
    <form class="subscribe_form">
        <input type="text" placeholder="EMAIL"/>
        <input type="submit" value="JOIN" />

    </form>
    <a href="<?php echo site_url(); ?>/home" class="enter button green">ENTER</a>

当用户点击SUBSCRIBE按钮时，它应该显示表单并隐藏ENTER BUTTON并将订阅按钮上的文本更改为＆＃34; CLOSE＆＃34;。再次按下按钮时会发生相反的情况。

这样做很有效，但是切换使表单滑入 - 我只是希望它显示或隐藏。

Answer 1

你可以用 .fadeToggle() 显示/隐藏没有幻灯片效果。 See here for documentation

Answer 2

检查这个简单的代码而不切换。

＆＃13;

var check=false;
$("form").hide();
$("a.enter").hide();
$('a.subscribe').click(function() {
    if(check==false){
       check=true;
        $(this).text('CLOSE');
        
        
        $("form").show();
        $("a.enter").show();
    }else{
       check=false;
        $(this).text('SUBSCRIBE');
        $("form").hide();
        $("a.enter").hide();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="subscribe button white">SUBSCRIBE</a>
    <form class="subscribe_form">
        <input type="text" placeholder="EMAIL"/>
        <input type="submit" value="JOIN" />

    </form>
    <a href="<?php echo site_url(); ?>/home" class="enter button green">ENTER</a>

＆＃13;

jQuery切换文本更改并隐藏元素

2 个答案: