2

基本的に、＃main-minicab-service、＃main-courier-service、＃main-removal-serviceという3つのdiv（ボタン）があります。これらのボタンをクリックすると、それぞれのページが表示され、次のdivが非表示になります：＃img-onlinebooking、＃main-online-booking、および＃main-onlinebooking-logo

また、ボタンを2回クリックすると、＃main-online-bookingdivが再び表示されます。これはある程度は機能しますが、（例）ミニキャブサービスボタンをクリックしてから宅配便ボタンをクリックすると機能しません。

私が何を達成しようとしているのかがわかるように、画像を表示します。

ここに画像の説明を入力してください

基本的に、私がしたいのは、minicab serviceボタンをクリックすると、#main-minicab-servicedivが表示されることです。ボタンをもう一度クリックするminicab serviceと、3つのオンライン予約部門が表示されます。この部分は正常に機能しますが、minicab service最初にボタンをクリックしてからボタンをクリックするとcourier service、#main-courier-serviceタブが表示されます。しかし、ボタンをクリックすると、[minicab serviceオンライン予約]タブが表示されますが、＃main-minicab-service`divが表示されます。

修正が必要なのは、同じボタンが2回クリックされた場合にのみオンライン予約のdivを表示したいということだけだと思います。それ以外の場合は、クリックされたdivを表示します。

私はこれが理にかなっていることを願っています、これが私がその瞬間に持っているjqueryです：

    /*  Click Events for Buttons */

        /* Courier */

      $("#img-courier").toggle(
        function(){ 

        $('#main-removal-service').hide();
        $('#main-minicab-service').hide();
        $('#img-onlinebooking').fadeOut('slow');
        $('#main-online-booking').fadeOut('slow');
        $('#main-onlinebooking-logo').fadeOut('slow');
        $('#main-courier-service').delay(600).fadeIn('slow');},

        function(){
        $('#main-removal-service').hide();
        $('#main-minicab-service').hide();
        $('#img-onlinebooking').show();
        $('#main-online-booking').show();
        $('#main-onlinebooking-logo').show();
        $('#main-courier-service').hide();
      });

       /* Minicab */

      $("#img-minicab").toggle(
        function(){ 

        $('#main-removal-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').fadeOut('slow');
        $('#main-online-booking').fadeOut('slow');
        $('#main-onlinebooking-logo').fadeOut('slow');
        $('#main-minicab-service').delay(600).fadeIn('slow');},

        function(){
        $('#main-removal-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').show();
        $('#main-online-booking').show();
        $('#main-onlinebooking-logo').show();
        $('#main-minicab-service').hide();

      });

      /* Removal */

      $("#img-removal").toggle(
        function(){ 

        $('#main-minicab-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').fadeOut('slow');
        $('#main-online-booking').fadeOut('slow');
        $('#main-onlinebooking-logo').fadeOut('slow');
        $('#main-removal-service').delay(600).fadeIn('slow');},

        function(){
        $('#main-minicab-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').show();
        $('#main-online-booking').show();
        $('#main-onlinebooking-logo').show();
        $('#main-removal-service').hide();

      });
4

1 に答える 1

2

コードが緊密に結合されています。コードでは、各要素が他の要素について知っている必要があります。たった3つの要素ですでに大きな問題が発生しています。3つではなく50の要素がある場合、実際の災害が発生します。よりモジュール化するには、コードをやり直す必要があります。これを出発点と考えてください。

    var allCourierElements = $(".myCourierElement");
    var allCabElements = $(".myCabElement");
    var allWhateverElements = $(".myWhateverElement");
    var allElements = $(".myElement");

    //so in your html, a valid cab element to be hidden or shown
    // would be, for instance:
    //<div class= "myElement myCabElement"></div>

    function func1(event)
    {

       allElements.hide();
       allCourierElements.show();

    }

    function func2(event)
    {

       allElements.hide();
       allCabElements.show();

    }

    function func3(event)
    {

       allElements.hide();
       allWhateverElements.show();

    }

    $("#img-courier").on('click', func1);
    $("#img-minicab").on('click', func2);
    $("#img-whatever").on('click', func3);
    //and so on
于 2013-01-06T14:29:12.960 に答える