Javascript 在更改图像时更改文本

有人知道我如何根据对象将#文章标题和#文章作者的文本更改为动态文本，以便该文章图像与Waterwheel image Carousel插件一起位于中心位置吗？现在它只显示最后一个对象的信息。如果我需要澄清或更好地理解我的问题，请告诉我。此外，对于如何更好地编写和构造代码的任何提示，我都非常感谢。提前谢谢

$（文档）.ready（函数（）{
让文章=[{
图像：“https://source.unsplash.com/400x500/?Flowers",
标题：“第1条”，
作者：“爱德华兹·埃尔里克”
},
{
图像：“https://source.unsplash.com/400x500/?Space",
标题：“第2条”，
作者：“詹姆斯·帕尔”
},
{
图像：“https://source.unsplash.com/400x500/?People",
标题：“第3条”，
作者：“Keven Dorant”
},
{
图像：“https://source.unsplash.com/400x500/?Cars",
标题：“第4条”，
作者：“彼得·史酷特”
},
{
图像：“https://source.unsplash.com/400x500/?Girls",
标题：“第5条”，
作者：“亚历克斯·布鲁”
}
]
条款。forEach（功能（条款）{
//console.log（article.author）
let waterwheel=document.getElementById（'waterwheel-carousel'）；
让imageHolder=document.createElement（“div”）；
imageHolder.className='char'
让image=document.createElement（'img'）
image.src=article.image；
imageHolder.appendChild（图像）
水车.附件儿童（图像支架）
})
var转盘=$（“#水车转盘”）。水车转盘({
地平线：200，
水平偏移量：0，
水平偏移乘数：.7，
activeClassName:“活动”，
分离：360，
侧翼项目：1，
键盘导航：对，
edgeFadeEnabled:是的，
//自动播放：1300，
动画化：“线性”，
clickedCenter:函数（$clickedItem）{
//$clickedItem是一个jQuery包装的对象，描述单击的图像。
$（“.text”）.css（“显示”、“块”）
},
movedToCenter:函数（$newCenterItem）{
$（“.text”）.css（“显示”、“块”）
条款。forEach（功能（条款）{
$（“#文章标题”）.text（article.title）
$（“#文章作者”）.text（article.author）
})
}
});
$（'#prev'）.bind（'click'，function（）{
上一个转盘（）；
返回错误
});
$（'#next'）.bind（'click'，function（）{
carousel.next（）；
返回false；
});
});
.img滑块{
边缘顶部：50px；
}
#水车转盘{
明确：两者皆有；
宽度：1000px；
高度：550px；
保证金：0自动；
溢出：隐藏；
位置：相对位置；
}
#水车转盘{
光标：指针；
可见性：隐藏；
}
.文本{
背景:#f5；
填充：10px；
显示：无；
位置：相对位置；
顶部：-122.5px；
文本对齐：居中；
宽度：25.2%；
保证金：自动；
}
.文本a{
显示：块；
颜色：#000；
}

文件
|
我的同僚们都是精英。天然枸杞叶

您可以获取当前图像的来源，并找到包含该图像的文章

然后您只需相应地更新
#文章标题
和
#文章作者

更新的
movedToCenter
功能：

movedToCenter: function ($newCenterItem) {

  $(".text").css("display", "block")

  // Get current image source
  const currentImageSource = $newCenterItem.attr('src');
  // Find article with a source of a current image
  const currentItem = articles.find(article => article.image === currentImageSource);

  // Set article title and author to a value of a curren item
  $('#article-title').text(currentItem.title)
  $('#article-author').text(currentItem.author)
}

以及整个更新片段：


$（文档）.ready（函数（）{
让文章=[{
图像：“https://source.unsplash.com/400x500/?Flowers",
标题：“第1条”，
作者：“爱德华兹·埃尔里克”
},
{
图像：“https://source.unsplash.com/400x500/?Space",
标题：“第2条”，
作者：“詹姆斯·帕尔”
},
{
图像：“https://source.unsplash.com/400x500/?People",
标题：“第3条”，
作者：“Keven Dorant”
},
{
图像：“https://source.unsplash.com/400x500/?Cars",
标题：“第4条”，
作者：“彼得·史酷特”
},
{
图像：“https://source.unsplash.com/400x500/?Girls",
标题：“第5条”，
作者：“亚历克斯·布鲁”
}
]
条款。forEach（功能（条款）{
//console.log（article.author）
let waterwheel=document.getElementById（'waterwheel-carousel'）；
让char=document.createElement（“div”）；
char.className='char'
让image=document.createElement（'img'）
image.src=article.image；
char.appendChild（图像）
水车。附属物（字符）
})
var转盘=$（“#水车转盘”）。水车转盘({
地平线：200，
水平偏移量：0，
水平偏移乘数：.7，
activeClassName:“活动”，
分离：360，
侧翼项目：1，
键盘导航：对，
edgeFadeEnabled:是的，
//自动播放：1300，
动画化：“线性”，
clickedCenter:函数（$clickedItem）{
//$clickedItem是一个jQuery包装的对象，描述单击的图像。
$（“.text”）.css（“显示”、“块”）
},
movedToCenter:函数（$newCenterItem）{
$（“.text”）.css（“显示”、“块”）
//获取当前图像源
const currentImageSource=$newCenterItem.attr（'src'）；
//查找具有当前图像源的文章
const currentItem=articles.find（article=>article.image==currentImageSource）；