Question

尝试使用jQuery来使用<h3>标题内的文本，并在<a href="">read more</a>链接中生成动态aria-labelledby属性。知道问题是什么以及如何解决？

HTML：

<section class="stories-section">
    <div class="container">
        <h2>Main Heading</h2>
        <div class="bx-wrapper">
            <div class="bx-viewport">
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4 slide">
                        <a href="#" target="_blank" class="story_image"><img src="" alt="" /></a>
                        <h3>Heading 1</h3>
                        <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="">read more</a></p>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4 slide">
                        <a href="#" class="story_image"><img src="" alt="" /></a>
                        <h3>Heading 2</h3>
                        <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="">read more</a></p>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4 slide">
                        <a href="#" target="_blank" class="story_image"><img src="" alt="" /></a>
                        <h3>Heading 3</h3>
                        <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="">read more</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

期望的输出：

<section class="stories-section">
    <div class="container">
        <h2>Main Heading</h2>
        <div class="bx-wrapper">
            <div class="bx-viewport">
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4 slide">
                        <a href="#" target="_blank" class="story_image"><img src="" alt="" /></a>
                        <h3>Heading 1</h3>
                        <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="" aria-labelledby="heading-1">read more</a></p>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4 slide">
                        <a href="#" class="story_image"><img src="" alt="" /></a>
                        <h3>Heading 2</h3>
                        <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="" aria-labelledby="heading-2">read more</a></p>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4 slide">
                        <a href="#" target="_blank" class="story_image"><img src="" alt="" /></a>
                        <h3>Heading 3</h3>
                        <p>Donec non commodo elit, in sagittis turpis. Fusce vitae ante nec dui iaculis finibus. Praesent arcu urna, lacinia sed feugiat a, imperdiet at nulla....<a href="" aria-labelledby="heading-3">read more</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

JS：

jQuery(".slide").find("h3").each(function() {
    var str = jQuery(this).text();
    str = str.replace(/\s+/g, '-').toLowerCase();
    jQuery(".slide").find("p a").attr('aria-labelledby', str);
});

jQuery - 使用标题在链接中创建aria-labelledby属性

1 个答案: