2

HTML
2つのリンクを追加して、「未回答」リンクを管理者コントローラーに送信し、「回答済み」リンクを管理者コントローラーの関数に送信します。

<h2 class="unanswered">
   <?=anchor('admin/', 'Unanswered', array('class' => 'selected'))?>
</h2>

<h2 class="answered">
   <?=anchor('admin/answered_posts', 'Answered')?>
</h2>

Jquery
ここでは、リンクにスタイルを追加および削除しようとしています。戻り値をfalseのままにすると、スタイルは正常に機能しますが、htmlアンカーのhrefが実行されなくなるため、コントローラーから必要な投稿を取り戻すことができません。戻り値falseを削除すると、hrefは正常に機能し、コントローラーから必要なものを取り戻しますが、jQueryに追加しているスタイルは機能しなくなります。

$('.unanswered').click(function(){
       $('.answered a').removeClass('active');
       $('.unanswered a').addClass('active'); 
       return false;
     });

     $('.answered').click(function(){
       $('.unanswered a').removeClass('active');
       $('.answered a').addClass('active');
       return false;
     });

サイドノート
私もやってみました：

$('.unanswered').click(function(e){
       e.preventDefault();
       $('.answered a').removeClass('active');
       $('.unanswered a').addClass('active'); 
     });

     $('.answered').click(function(e){
       e.preventDefault();
       $('.unanswered a').removeClass('active');
       $('.answered a').addClass('active');
     });
4

1 に答える 1

2

質問のコメントを参照します-あなたの意図を理解している場合（リンクをクリックし、サーバーの舞台裏で何かを更新し、ページをリロードせずにページにスタイルを適用する）、これはおそらくあなたが望むものですAJAXと関係があります。例（テストされていないコード）：

$('.unanswered, .answered').click(function() {
    $.ajax({
        url: $(this).attr('href')
    }).done(function() {
        /* You'll need to add some logic in here to remove the active class from
        the answered or unanswered question if it exists. Depending on the rest of your 
        HTML, this could be done with something like $(this).closest('myWrapper').find('a.active').removeClass('active') */

        /* Once you've cleaned up any active classes, add an active class to this element */
        $(this).addClass('active');

    });
});

jQuery AJAXの詳細については、http：//api.jquery.com/jQuery.ajax/を参照してください。

あなたが何をしようとしているのか正確にはわからないので、これを試すこともできます（クラスを更新してからリクエストを送信します）。ページがすぐにリロードされるため、CSSの変更が反映されていない場合があります。

$('.answered').click(function() {
   // Set up the classes here
   $('.unanswered a').removeClass('active');
   $(this).addClass('active');

   /* When this element has an active class, then it will redirect to the link's URL, the HREF attribute. We do this check because javascript is asynchronous, all lines can run at the same time, so this prevents window.location from being called before the class is changed */
   if($(this).hasClass('active')) {
       window.location = $(this).attr('href');
   }

   // Still return false to prevent the default redirect that would happen without javascript.
   return false;
 });
于 2013-02-04T17:04:47.357 に答える