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个框都具有独立的打开状态； </ p>

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

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

1 个答案: