0

IDtodayと。で2つのdivを取得しましたtomorrow。そのうちの1つしか表示できないので、これら2つを切り替えるjavascript関数を作成しました。

    function switchDay(selector) {
    if (selector == "tomorrow") {
        $("#today").hide();
        $("#tomorrow").show();
        $("#daySelector").html('<a href="#" onclick="return switchDay(\'today\');">this day</a> | next day');

    }
    if (selector == "today") {
        $("#tomorrow").hide();
        $("#today").show();
        $("#daySelector").html('this day | <a href="#" onclick="return switchDay(\'tomorrow\');">next day</a>');

    }   
  return false;
}

私のPHPでは、次のようにスイッチリンクをエコーし​​ます。

echo '<p id="daySelector">today | <a href="#" onclick="return switchDay(\'tomorrow\');">tomorrow</a></p>';

ご覧のとおり、私はすでにhide（）とshow（）をjquery関数に切り替えており（.style.display関数を使用する前）、古いものを捨ててonclickjqueryを使用したいと考えてい.click()ます。ただし、スイッチリンクをどのように変更するかはわかりません。

これどうやってするの？（スクリプトがそれほど大きくならない場合に最適です...）

4

4 に答える 4

3

これには多くのアプローチがあります（神様、私はこのためプログラミングが大好きです）。

簡単な方法は、これを行うことです。

$('#daySelector a').live('click', function () {
    if ($(this).hasClass("tomorrow")) {
        $("#today").hide();
        $("#tomorrow").show();
        $("#daySelector").html('<a href="#" class="today">this day</a> | next day');    
    }
    if ($(this).hasClass("today")) {
        $("#tomorrow").hide();
        $("#today").show();
        $("#daySelector").html('this day | <a href="#" class="tomorrow">next day</a>');

    }   
  return false;
});

次に、次のようにPHPを実行します。

echo '<p id="daySelector">today | <a href="#" class="tomorrow">tomorrow</a></p>';

私はそれをテストしませんでした。まだ動作するはずです。

以下のコメントに続いて、ライブが非推奨になっていることを思い出しました。.onメソッドを使用する方法は次のとおりです。バインディングにドキュメントを使用しないように編集しました。

$('#daySelector').on('click', 'a', function () {
    if ($(this).hasClass("tomorrow")) {
        $("#today").hide();
        $("#tomorrow").show();
        $("#daySelector").html('<a href="#" class="today">this day</a> | next day');    
    }
    if ($(this).hasClass("today")) {
        $("#tomorrow").hide();
        $("#today").show();
        $("#daySelector").html('this day | <a href="#" class="tomorrow">next day</a>');

    }   
  return false;
});
于 2012-10-04T21:33:17.713 に答える
0

イベントを親要素に委任すると、 .toggle（）で条件（true = show / false = hidden。）を渡すことができるため、if/elseを取り除くことができます。

$('#daySelector').on('click','a',function(e){    
   e.preventDefault(); // prevent default anchor click action
    var day = $(this).text();  // get text to check
    $("#tomorrow").toggle(day.indexOf('this') > -1); // show if currently this
    $("#today").toggle(day.indexOf('next') > -1); // show if currently next
    $(this).text(day.indexOf('this') > -1 ? 'next day':'this day'); // toggle text
});​​​

http://jsfiddle.net/pFDsZ/

すべてのHTMLを表示しなかったので、いくつかの部分を推測していました。

于 2012-10-04T21:38:11.423 に答える
0

リンクからクリックハンドラーを削除し、セレクター属性を追加します。

echo '<p id="daySelector">today | <a href="#" selector="tomorrow">tomorrow</a></p>';

クリックハンドラーを追加します。

$('#daySelector').on('click','a', function() {
    return switchDay(this.attr("selector"));
});

1.7の時点でlive非推奨になっていることに注意してください

function switchDay(selector) {
    if (selector == "tomorrow") {
        $("#today").hide();
        $("#tomorrow").show();
        $("#daySelector").html('<a href="#" selector="today">this day</a> | next day');

    } else if (selector == "today") {
        $("#tomorrow").hide();
        $("#today").show();
        $("#daySelector").html('this day | <a href="#" selector="tomorrow">next day</a>');

    }   
   return false;
}
于 2012-10-04T21:34:08.020 に答える
0

これは機能します：

マークアップ：

<div id='today'>Content A</div>
<div id='tomorrow'>Content B</div>
<p><a href="#" id='switch'>Switch to <span id='switchText'>tomorrow</span></a></p>

脚本：

    $(document).ready(
    function () {
        showToday();
        $('#switch').click(
            function () {
                var switchText = $('#switchText').text();
                if (switchText == 'tomorrow') {
                    showTomorrow();
                } else {
                    showToday();
                }
            }
        );
    }
    );
    function showToday() {
        $('#today').show();
        $('#tomorrow').hide();
        $('#switchText').text('tomorrow');
    }

    function showTomorrow() {
        $('#today').hide();
        $('#tomorrow').show();
        $('#switchText').text('today');
    }
于 2012-10-04T22:01:20.727 に答える