主页 / 问题 / 1127798
Accepted
Arcadiy
Asked:2020-05-19 06:09:39 +0000 UTC2020-05-19 06:09:39 +0000 UTC

如何为每个按钮分配一个类

  • 772

有一个代码

$(document).ready(function() {
  let loaded = false; // Индикатор загруженного графика
  let originalContent = $("#div").html(); // Заглушка графика

  $("button").click(function() {
    if (loaded) {
      $("#div").html(originalContent);
      loaded = false;
      this.innerText = 'Get Dynamic chart';
    } else {
      this.disabled = true; // Исключаем возможность повторных запросов
      $.get("https://stackoverflow.getsandbox.com:443/dashboard", function(html) {
        $("#div").html(html);
        $("button").prop('disabled', false).text('Close Dynamic chart');
        loaded = true;
      });
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <h2>Dynamic chart1</h2>
</div>
<button>Get Dynamic chart1</button>

<div id="div2">
  <h2>Dynamic chart2</h2>
</div>
<button>Get Dynamic chart2</button>

<div id="div3">
  <h2>Dynamic chart3</h2>
</div>
<button>Get Dynamic chart3</button>

<div id="div4">
  <h2>Dynamic chart4</h2>
</div>
<button>Get Dynamic chart4</button>

<div id="div5">
  <h2>Dynamic chart5</h2>
</div>
<button>Get Dynamic chart5</button>

网站页面上有 5 个这样的按钮，如何使当第一个按钮被按下时，它的内容打开，而不是一次按下所有按钮？

javascript

1 个回答

  1. Best Answer

    $(document).ready(function() {
  $("button").click(function() {
    var btn = this;
    
    if (btn.loaded) {
      $(btn).prev("div").html(btn.originalContent);
      btn.loaded = false;
      $(btn).text('Get Dynamic chart');
    } else {
      btn.originalContent = $(btn).prev("div").html();
      $(btn).prop('disabled', true);
      $.get($(btn).data("url"), function(html) {
        $(btn).prev("div").html(html);
        $(btn).prop('disabled', false).text('Close Dynamic chart');
        btn.loaded = true;
      });
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <h2>Dynamic chart1</h2>
</div>
<button data-url="https://stackoverflow.getsandbox.com:443/dashboard?a=1">Get Dynamic chart1</button>

<div id="div2">
  <h2>Dynamic chart2</h2>
</div>
<button data-url="https://stackoverflow.getsandbox.com:443/dashboard?a=2">Get Dynamic chart2</button>

<div id="div3">
  <h2>Dynamic chart3</h2>
</div>
<button data-url="https://stackoverflow.getsandbox.com:443/dashboard?a=3">Get Dynamic chart3</button>

<div id="div4">
  <h2>Dynamic chart4</h2>
</div>
<button data-url="https://stackoverflow.getsandbox.com:443/dashboard?a=4">Get Dynamic chart4</button>

<div id="div5">
  <h2>Dynamic chart5</h2>
</div>
<button data-url="https://stackoverflow.getsandbox.com:443/dashboard?a=5">Get Dynamic chart5</button>

    • 2

相关问题