时间戳

首页 > 解决方案 > 循环通过每个部分获取模态 ID 并应用于模态组件

javascript - 循环通过每个部分获取模态 ID 并应用于模态组件

问题描述

您好，我有以下部分，需要在每个部分中执行以下
循环并获取data-target每个部分中的值。
将该data-target值应用于模态aria-labelledby和id同级

<section>
    <div>
        <ul>
            <li>
                <a href="#" data-toggle="modal" data-target="#example-one"> Modal Trigger </a>
            </li>
        </ul>
        <div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
            <p>modal content</p>
        </div>
    </div>
</section>
<section>
    <div>
        <ul>
            <li>
                <a href="#" data-toggle="modal" data-target="#example-two"> Modal Trigger </a>
            </li>
        </ul>
        <div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
            <p>modal content</p>
        </div>
    </div>
</section>
<section>
    <div>
        <ul>
            <li>
                <a href="#" data-toggle="modal" data-target="#example-three"> Modal Trigger </a>
            </li>
        </ul>
        <div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
            <p>modal content</p>
        </div>
    </div>
</section>

标签： javascriptjquery

解决方案

只需遍历每个部分-获取 ul li 中 a 的数据目标并将其应用于该部分中模态的 2 个属性（id 和 aria-labelled-by）。

此外 - 不确定 aria-labelled-by 的这种实现是否正确 - 您不应该将被标记为您要标记的元素的元素的 id。

编辑 - 更新以从 id 中删除“#” - 我通过使用 .replace(/#/,'') 来做到这一点。

$('section').each(function(){
  var modalId = $(this).find('a').attr('data-target').replace(/#/,'');
  console.log(modalId);
  var modal= $(this).find('.modal');
  modal.attr('id', modalId).attr('aria-labelledby', modalId)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <div>
        <ul>
            <li>
                <a href="#" data-toggle="modal" data-target="#example-one"> Modal Trigger </a>
            </li>
        </ul>
        <div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
            <p>modal content</p>
        </div>
    </div>
</section>
<section>
    <div>
        <ul>
            <li>
                <a href="#" data-toggle="modal" data-target="#example-two"> Modal Trigger </a>
            </li>
        </ul>
        <div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
            <p>modal content</p>
        </div>
    </div>
</section>
<section>
    <div>
        <ul>
            <li>
                <a href="#" data-toggle="modal" data-target="#example-three"> Modal Trigger </a>
            </li>
        </ul>
        <div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
            <p>modal content</p>
        </div>
    </div>
</section>

顺便说一句-您实际上根本不需要数据目标-只需将该内容放入 a href 属性中（并查询该内容以获取模态元素的内容。

$('section').each(function(){
  var modalId = $(this).find('a').attr('href').replace(/#/,'');
  console.log(modalId);
  var modal= $(this).find('.modal');
  modal.attr('id', modalId).attr('aria-labelledby', modalId)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <div>
        <ul>
            <li>
                <a href="#example-one" data-toggle="modal"> Modal Trigger </a>
            </li>
        </ul>
        <div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
            <p>modal content</p>
        </div>
    </div>
</section>
<section>
    <div>
        <ul>
            <li>
                <a href="#example-two" data-toggle="modal"> Modal Trigger </a>
            </li>
        </ul>
        <div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
            <p>modal content</p>
        </div>
    </div>
</section>
<section>
    <div>
        <ul>
            <li>
                <a href="#example-three" data-toggle="modal"> Modal Trigger </a>
            </li>
        </ul>
        <div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true" id="" tabindex="-1">
            <p>modal content</p>
        </div>
    </div>
</section>

推荐阅读