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

Question

我有3个盒子，每个盒子都有一个切换按钮。我想单独切换每个的“开放”状态。但是，我不知道如何将打开状态的范围扩展到每个框。

我尝试使用各种属性和方法创建一个对象，但我一直遇到的主要问题是无法重新访问open属性。有一种感觉可能有点矫枉过正。

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个盒子具有独立的打开状态;

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"));
    });
}