jQuery的週期addSlides「ALT」

Question

我不覺得我的問題的答案。我認爲這是一個很小的問題，但我目前腦中有一些結。

我需要<的造型裏>元素，但功能的alt屬性添加到一個特定元素（＃C11）不出現<img>之前使用<li>時，雖然它似乎沒有精細的工作。

你能幫我嗎？

這裏是我的JS：

$(document).ready(function() { 

$('#slideshow1').cycle({ 
    fx:  'scrollHorz', 
    auto: false, 
    before: onBefore, 
    prev: '#prev', 
    next: '#next', 
    timeout: 0, 
    sync: 1, 
    speed: '100', 
    pagerAnchorBuilder: pagerFactory, 
    after:  function() { 
    $('#c1').html(this.alt); 
    } 
}); 

var slidesAdded = false; 
function onBefore(curr, next, opts) { 
    if (!opts.addSlide || slidesAdded) 
     return; 
    opts.addSlide('<li><img src="loadimages/1.jpg" width="800" height="560" alt="Beach 1" /></li>'); 
    opts.addSlide('<li><img src="loadimages/2.jpg" width="800" height="560" alt="Beach 2" /></li>'); 
    opts.addSlide('<li><img src="loadimages/3.jpg" width="800" height="560" alt="Beach 3" /></li>'); 
    opts.addSlide('<li><img src="loadimages/4.jpg" width="800" height="560" alt="Beach 4" /></li>'); 
    slidesAdded = true; 
}; 
function pagerFactory(idx, slide) { 
    var s = idx > 2 ? ' style="display:none"' : ''; 
    return '<li'+s+'><a href="#">'+(idx+1)+'</a></li>'; 
}; 

---

和這裏的HTML：

<div style="text-align:center;margin:auto;width:300px"> 
    <a href="#"><span id="prev">Prev</span></a> 
    <a href="#"><span id="next">Next</span></a> 
</div> 

<div id="slideshow1" class="pics"> 
<li><img src="loadimages/1.jpg" width="800" height="560" alt="Beach 1" /></li> 
<li><img src="loadimages/4.jpg" width="800" height="500" alt="Beach 2" /> </li> 

</div> 

Answer 1

使用jQuery有可能樣式裏面figure標籤的figcaption的Alt標籤。這裏有一個小提琴（https://jsfiddle.net/0Lqxb4cp/）可能是這個樣子：

.img-fluid { width: 100%; } 
figure { display:block; position: relative; } 

figcaption { display: block; } 

使用此HTML：

<figure> 
    <img class="img-fluid" src="image.png" alt="This content will be appended inside the Figure Caption tag!"> 
</figure>` 

其次是這個jQuery：

<script src="js/jquery.js"></script> 
<script> 
$('img', 'figure').each(function() { 
     $(this).parent().append('<figcaption>' + this.alt + '</figcaption>'); 
    }); 
</script>