Как присвоить каждой кнопке свой класс

Question

Есть код

$(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 таких кнопок , как сделать так чтоб при нажатии первой кнопки открывался ее контент, а не нажимались сразу все кнопки?

Answer 1

$(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>

БЛОГ НА HUSL

Как присвоить каждой кнопке свой класс

Ответы (1 шт):