主页 / 问题 / 1135360
Accepted
Arcadiy
Asked:2020-06-03 00:39:07 +0000 UTC2020-06-03 00:39:07 +0000 UTC

如何实施？

  • 772

有一个代码

$("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-й кнопке中指定它们自己的名称на открытие，закрытие以及возврат к исходному названию？

javascript

1 个回答

  1. Best Answer

    $btn.text( $btn.attr("data-close") || "Закрыть" );- 如果您在数据属性中手动设置关闭按钮的文本，则会采用该文本，否则 - 默认值。

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

    • 1

相关问题