0

ユーザーがクリックしたときにテキストを変更しようとしていますが、機能していないようです..以下はコードです。

動作しないサンプル: 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>
4

2 に答える 2

0

私はこれに少し違ったアプローチをします。リンクをdata-*属性でマークアップし、1つのイベントハンドラーを使用して、関連するコンテンツの表示/非表示を制御します。

マークアップを次のようにします。

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

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

編集：上記を更新して、表示する前に他の表示要素を非表示にする機能を追加しました。

于 2012-04-26T15:32:48.260 に答える
0

.slide > aマークアップにそのような要素はありません

これを試してください（ところで、これはJamiecのjsfiddle修正からの更新です）
http://jsfiddle.net/eWExr/6/

于 2012-04-26T15:25:52.840 に答える