javascript - 如何在具有相同标签或类的对象中单独管理状态

Question

我有 3 个盒子，每个盒子都有一个切换按钮。我想分别切换每个的“打开”状态。但是，我不知道如何将打开状态限定为每个框。

我尝试创建具有各种属性和方法的对象，但我一直遇到的主要问题是无法重新访问打开的属性。有一种感觉，无论如何都可能是矫枉过正。

const serviceImages13 = () => {

    const $openBtn = $('.hollow-service-images-13 .toggle')
    let open = false

    $openBtn.on('mousedown', function() {
        if (!open) {
            $(this).css('transform', 'rotate(-45deg)')
        } else {
            $(this).css('transform', 'rotate(450deg)')
        }
    })

    $openBtn.on('mouseup', function() {
        if (!open) {
            $(this).css('transform', 'rotate(405deg)')
            open = true
            console.log('open', open)
        } else {
            $(this).css('transform', 'rotate(0)')
            open = false
            console.log('open', open)
        }
    })

}
serviceImages13()

<section class="hollow-service-images-13">
  <div class="flex-container">
    <figure>
      <img src="" alt="">
      <figcaption>
        <h3>First <span>Service</span></h3>
        <p>This is filler content. The text in this area will be replaced when copy from your site becomes available. This paragraph will be updated. This is filler content. The text in this area will be replaced when copy from your site becomes available. This paragraph will be updated.</p>
        <a href="#">Learn More</a>
      </figcaption>
      <i class="toggle fa fa-plus"></i>
    </figure>
    <figure>
      <img src="" alt="">
      <figcaption>
        <h3>Second <span>Service</span></h3>
        <p>This is filler content. The text in this area will be replaced when copy from your site becomes available. This paragraph will be updated. This is filler content. The text in this area will be replaced when copy from your site becomes available. This paragraph will be updated.</p>
        <a href="#">Learn More</a>
      </figcaption>
      <i class="toggle fa fa-plus"></i>
    </figure>
    <figure>
      <img src="" alt="">
      <figcaption>
        <h3>Third <span>Service</span></h3>
        <p>This is filler content. The text in this area will be replaced when copy from your site becomes available. This paragraph will be updated. This is filler content. The text in this area will be replaced when copy from your site becomes available. This paragraph will be updated.</p>
        <a href="#">Learn More</a>
      </figcaption>
      <i class="toggle fa fa-plus"></i>
    </figure>
  </div>
</section>

目前，您单击的任何按钮都会切换打开状态。预期的结果是所有 3 个盒子都具有独立的打开状态；

标签： javascript

Answer 1

一种解决方案是使用JQuery.data()open将每个元素的状态保存在HTML属性中。

例子：

const serviceImages13 = () =>
{
    const $openBtn = $('.hollow-service-images-13 .toggle');
    $openBtn.data("isOpen", false);

    $openBtn.on('mousedown', function()
    {
        if ( !$(this).data("isOpen") )
            $(this).css('transform', 'rotate(-45deg)');
        else
            $(this).css('transform', 'rotate(450deg)');
    });

    $openBtn.on('mouseup', function()
    {
        if ( !$(this).data("isOpen") )
        {
            $(this).css('transform', 'rotate(405deg)');
            $(this).data("isOpen", true);
        }
        else
        {
            $(this).css('transform', 'rotate(0)');
            $(this).data("isOpen", false);
        }

        console.log('open', $(this).data("isOpen"));
    });
}