Как реализовать такое?

Question

Есть код

$("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('Закрыть');
        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">Другая кнопка</button>

Так вот, Кнопка 5 имеет отличное от всех название, но при нажатии на нее название скриптом меняется на "Закрыть", это нормально. Но после нажатия кнопки закрыть, название кнопке присваивается скриптом на Get Dynamic chart заместо "Другая кнопка", то-бишь родное название не превалирует. Как сделать что-бы у 5 кнопки до нажатия и после нажатия имена не присваивались скриптом или же как 5-й кнопке присвоить в скрипте свои названия на открытие, закрытие и возврат к исходному названию?

Answer 1

$btn.text( $btn.attr("data-close") || "Закрыть" ); — Если вручную в data-атрибуте задали текст для кнопки-закрывашки, возьмется он, иначе - значение по умолчанию.

$("button").each(function() {
  this.dataset.HTML = this.innerHTML; 
  /* Оригинальный HTML можно отдельно сохранить... */

  $(this).on("click", function() {
    var $btn = $(this);
    var btn = this;

    if (btn.loaded) {
      $btn.prev("div").html(btn.originalContent);
      $btn.html( btn.dataset.HTML );
      btn.loaded = false;
    } 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($btn.attr("data-close") || "Закрыть");
        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"><img src="http://drako.ru/game/shared/data/smiles_extPicture/meow.png"></button>

<div id="div2">
  <h2>Dynamic chart2</h2>
</div>
<button data-url="https://stackoverflow.getsandbox.com:443/dashboard?a=2"><img src="http://drako.ru/game/shared/data/smiles_extPicture/meow.png"></button>

<div id="div3">
  <h2>Dynamic chart3</h2>
</div>
<button data-url="https://stackoverflow.getsandbox.com:443/dashboard?a=3"><img src="http://drako.ru/game/shared/data/smiles_extPicture/meow.png"></button>

<div id="div4">
  <h2>Dynamic chart4</h2>
</div>
<button data-url="https://stackoverflow.getsandbox.com:443/dashboard?a=4"><img src="http://drako.ru/game/shared/data/smiles_extPicture/meow.png"></button>

<div id="div5">
  <h2>Dynamic chart5</h2>
</div>
<button data-close="Закрыть подписку" data-url="https://stackoverflow.getsandbox.com:443/dashboard?a=5">Другая кнопка</button>

БЛОГ НА HUSL

Как реализовать такое?

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