Question

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

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

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

enter image description here

基本上，我想要发生的是，如果您点击minicab service按钮，它会显示#main-minicab-service div。如果再次单击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();

      });

Answer 1

你的代码太紧密了。在您的代码中，每个元素必须知道其他元素。你已经看到只有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

Jquery Click事件问题（使用切换）

1 个答案: