Question

你好，我有以下几节，需要做以下事情
遍历每个部分，并在每个部分中获取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>

Answer 1

只需遍历每个部分，即可获取ul li中a的数据目标，并将其应用于该部分中模态的2个属性（id和aria-labeled-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>

循环遍历每个部分，获取模态ID并应用于模态组件

1 个答案: