我如何运行一个函数（）然后togle并让它们同时运行？

Question

我想问我如何只“drawTable”一次并切换它？我不想每次单击元素时都调用我的 ajax。当我单击 tableA 时，drawTable() 加载时间过长，并且 tableA 的类已经首先切换，因为我的 tableA 的 onclick 上有另一个 toggleSetting() 函数，我如何确保它同时更改？

$("#tableA").on("click", (function () {

                $.ajax({
                    type: "POST",
                    url: "Acc.ashx",
                    success: function (output) {
                        try {
                            output = JSON.parse(output);
                            DrawATable(output);
                        }
                        catch (ex) {
                            alert("error");
                            $('#tableA').empty();
                        }
                    }
                    , complete: function (data) {
                        isClicked = false;

                    }
                }).then($('#tableSAOnce').toggleClass('accordion accordion2'))
            }));

    function toggleSetting(setting, ctrl) {

        var stt = document.getElementById(setting);
        if (stt.style.display == 'none') {
            stt.style.display = '';
            ctrl.className = "accordion2";
        }
        else {
            stt.style.display = 'none';
            ctrl.className = "accordion";
        }           
    }

            <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                        <table id="tableAOnce" class="accordion" onclick="toggleSetting('toggleA',this)">
                        <tr>
                            <td align="left">TableA</td>
                        </tr>
                        </table>
                    </td>
                </tr>
                <tr style="display:none;" id="toggleA" >
                    <td>
                        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" id="tableA"></table>
                    </td>
                </tr>
            </table>

Answer 1

我觉得有点难以理解你到底想做什么，但我想我现在已经理解了。

我更改了标记的类和 ID 以使 jQuery 代码更简单。如果您现在单击.accordion .accordion-toggler，则data-toggle 的元素将通过切换类hide 可见。每次切换时，代码都会检查表格是否已经有内容。如果没有内容，则调用doAjax 函数。然后你必须改变你的 DrawATable 函数，正如我在新函数 drawTable 中描述的那样。

希望对你有帮助。

var $tableToggler = $('#tableToggle');

function onTogglerClick(event) {
  var $triggerElement = $(event.currentTarget);
  var $target = $($triggerElement.data('toggle'));

  if ($target.length) {
    $target.closest('.toggle-parent').toggleClass('hide');

    // check if indicator for contents exists
    if (!$triggerElement.hasClass('has-contents')) {
      doAjax($target);
    }
  }
}

function doAjax($target) {
  $.ajax({
    type: "POST",
    url: "Acc.ashx",
    dataType: 'json',
    success: function(output) {
      // you can simply use "dataType: 'json'", so your response is a json object
      // and then you don't need to try to parse the output into json
      drawTable($target, output);
    },
    error: function() {
      $target.empty();
    },
    /* complete: function(data) {
      // do you need this line anymore?
      // isClicked = false;
    } */
  });
}

function drawTable($target, content) {
  // example start
  var sb = new StringBuilder();
  
  sb.append('<tr><td>' + content[0] + '</td></tr>');
  $target.html(sb.toString());
  // example end
  
  if ($target.children().length) {
    $target.addClass('has-contents');
  }
}

$tableToggler.on('click', '.accordion-toggler', onTogglerClick);

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table id="tableToggle" class="accordion">
        <tr>
          <td align="left" class="accordion-toggler" data-toggle="#tableA">TableA</td>
        </tr>
        <tr>
          <td align="left" class="accordion-toggler" data-toggle="#tableB">TableB</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr class="toggle-parent hide">
    <td>
      <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" id="tableA"></table>
    </td>
  </tr>
  <tr class="toggle-parent hide">
    <td>
      <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" id="tableB"></table>
    </td>
  </tr>
</table>

Answer 2

        $("#tb1").on("click", function () {

            if (($("#tb2 tr").length) > 0) {
                $("#tb2").toggle();
            }
            else {
                $.ajax({
                    type: "POST", url: "Test.ashx"
                    , success: function (output) {
                        try {
                            output = JSON.parse(output);
                            DrawTable(output);
                            
                        }
                        catch (ex) {
                            alert("error");
                            $('#tb2').empty();
                            
                        }
                    }
                    , complete: function (data) {
                        $("#tb2").show();
                    }
                })
            }
        });


        <table>
            <tr>
                <td>
                    <table id="tb1">
                        <tr>
                            <td>TableA</td>
                        </tr>
                    </table>
               </td>
            </tr>
            <tr><td>&nbsp;</td></tr>
            <tr>
                <td>
                     <table id="tb2"></table>
                </td>
            </tr>
        </table>