0
試圖使用jQuery來使用<h3>
標題中的文本,並在<a href="">read more</a>
鏈接中生成動態aria標籤的屬性。任何想法是什麼問題以及如何解決?jQuery - 使用標題在鏈接中創建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);
});