如何使用 javascript 獲取圖像 alt 標簽？

Question

我無法使用 javascript 獲取圖像 alt 標簽。 有可能嗎？怎么做？

可能類似於：$caption.text(flkty.selectedElement).attr('alt')（最后的 javascript 行）

但我不讓它工作......

謝謝！

 var $carousel = $('.carousel').flickity({ imagesLoaded: true, percentPosition: false }); var $caption = $('.caption'); // Flickity instance var flkty = $carousel.data('flickity'); $carousel.on( 'select.flickity', function() { // set image caption using img's alt $caption.text( flkty.selectedElement.alt ) });

 .carousel-cell { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }.carousel-cell img { /* display: block; */ /* max-height: 100%; */ max-width: 100%; } p { text-align: center; }

 <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> <div class="carousel"> <div class="carousel-cell"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" /> </div> <div class="carousel-cell"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" /> </div> </div> <p class="caption">&nbsp;</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Answer 1

使用attr

 const img = document.getElementById('image') const alt = img.getAttribute('alt') console.log(alt)

 <img id="image" src="https://picsum.photos/200/300" alt="this it the alt attribute" />

使用jQuery ：

 const alt = jQuery("#image").attr('alt') console.log(alt)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="image" src="https://picsum.photos/200/300" alt="this it the alt attribute" />

您的代碼中有一個小錯誤：

 var $carousel = $('.carousel').flickity({ imagesLoaded: true, percentPosition: false }); var $caption = $('.caption'); // Flickity instance var flkty = $carousel.data('flickity'); $carousel.on('select.flickity', function() { // set image caption using img's alt $caption.text($(flkty.selectedElement).find('img').attr('alt')) });

 .carousel-cell { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }.carousel-cell img { max-width: 100%; } p { text-align: center; }

 <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> <div class="carousel"> <div class="carousel-cell"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" /> </div> <div class="carousel-cell"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" /> </div> </div> <p class="caption">&nbsp;</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>