2

基本上我有一个名为#main-minicab-service、#main-courier-service 和#main-removal-service 的三个div（按钮）。单击这些按钮时，它们会显示相应的页面并隐藏以下 div：#img-onlinebooking、#main-online-booking 和 #main-onlinebooking-logo

当您再次单击该按钮时，它会再次显示#main-online-booking div。虽然这在一定程度上是有效的，但是当您（例如）单击 minicab 服务按钮然后单击 courier 按钮时，它不起作用。

为了让您了解我要实现的目标，我将向您展示一张图片：

在此处输入图像描述

基本上，我想要发生的是，如果您单击minicab service按钮，它会显示#main-minicab-servicediv。如果minicab service再次单击该按钮，则会显示三个在线预订 div。这部分工作正常，但是，如果我minicab service先单击按钮然后单击courier service按钮，它会#main-courier-service再次显示选项卡。但是，如果我然后单击该minicab service按钮，它将显示在线预订选项卡，我希望它显示#main-minicab-service` div。

我认为唯一需要修复的部分是我希望它仅在单击两次相同按钮时才显示在线预订 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 个元素的大问题。如果你有 50 个元素而不是 3 个元素，那将是一场真正的灾难。您必须重做您的代码以更加模块化。将此作为起点：

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