Question

我试图在用户点击时更改文本，但似乎无法正常工作。下面是代码。

<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/

修改：我已更新上述内容，以包含在显示其他可见元素之前隐藏其功能。

切换时更改文本

2 个答案: