jquery - 切换时更改文本

Question

我正在尝试在用户单击但似乎不起作用时更改文本..以下是代码。

不工作示例：http: //jsfiddle.net/3jt3P/1/

<a href="#" class="slide" onclick="firstclick();">Show First</a> ... 
<a href="#" class="slide1" onclick="secondclick();">Show Second</a>

<div id="one" class="content">one</div>
<div id="second" class="content">two</div>


<script type="text/javascript">

        function firstclick() { 
            $('#second').hide();
            $('#one').slideToggle(400, function () {
                debugger
                if ($(this).is(":visible")) {
                    $('.slide > a').text('Hide First');
                    $('.slide1 > a').text('Second');
                }
                else {
                    $('.slide > a').text('First');
                } 
            });
            return false;

        } 
        function secondclick() { 
            $('#one').hide();
            $('#second').slideToggle(400, function () {

                if ($(this).is(":visible")) {
                    $('slide1 > a').text('Hide Second');
                    $('slide > a').text('First');
                }
                else
                    $('slide1 > a').text('First');

            });
            return false;
        } 

        $(document).ready(function () {
            // Hide the "view" div.
            $('#one').hide();
            $('#second').hide();

        });
    </script>

Answer 1

.slide > a您的标记中没有这样的元素

试试这个（顺便说一句，这是 Jamiec 的 jsfiddle 修复的更新）
http://jsfiddle.net/eWExr/6/

Answer 2

我会稍微不同地处理这个问题；data-*用属性标记您的链接并仅使用一个事件处理程序来控制它们显示/隐藏相关内容。

使您的标记类似于：

<a href="#" class="slide" data-content="#one" data-text="first">Show first</a>
<a href="#" class="slide" data-content="#second" data-text="second">Show second</a>

<div id="one" class="content">one</div>
<div id="second" class="content">two</div>

请注意，我添加了 2 个属性：

• data-content包含相关内容的 id
• data-text包含链接中使用的后缀。

我还更改了两个链接以具有相同的类 - 这可以是任何东西，但允许我定位链接，以便我可以附加相同的行为：

$('.slide').on("click",function(){
    var $link = $(this);
   var contentid = $link.data('content');
    $('.slide').not($link)
               .filter(function(){ return $(this).data('contentvisible');})
               .trigger('click');
    $(contentid).slideToggle(400,function(){
        if($(this).is(':visible')){
            $link.data('contentvisible',true).text('Hide ' + $link.data('text'));
        }
        else{
           $link.data('contentvisible',false).text('Show ' + $link.data('text'));                
        }
    });
});
$('#one').hide();
$('#second').hide();

现场示例：http: //jsfiddle.net/htn3S/1/

编辑：我更新了上面的内容，包括在显示之前隐藏其他可见元素的功能。