为上一个和下一个分配图像源

【问题标题】：Assigning image source for previous and next为上一个和下一个分配图像源
【发布时间】：2015-08-04 20:25:53
【问题描述】：

我正在使用 wordpress（带有高级自定义字段）将图像从数据库插入到我的 html 中。我有一个人员详细信息部分，其中在轮播中包含每个人的信息（图像、姓名、简历等）。上一个和下一个按钮应该有上一个和下一个人的照片和姓名。我不确定是否有办法使用高级自定义字段或 wordpress 来实现这一点，所以我尝试使用 js/jquery 来实现。

我对分配 prev/next .attr("src") 很感兴趣。使用下面的代码控制所有值，然后分配它找到的最后一个 .attr("src") （显然）。我无法弄清楚如何分配上一个/下一个 img 的来源。

JSFiddle for clarity

任何帮助将不胜感激，谢谢！

JavaScript / JQuery

var img_array = $(".detail-center img").map(function() {
    console.log( $(this).attr("src") );
    var img = $(this).attr("src");
    $('.detail-left img').attr('src', img);
}).get();

【问题讨论】：

标签： javascript php jquery html wordpress

【解决方案1】：

您可以在 ACF v5 中创建自定义字段类型：http://www.advancedcustomfields.com/resources/creating-a-new-field-type/。

添加您的代码以显示function render_field($field) 下的字段。您可以为每个超级英雄选择生成<div>s，并根据当前值（通过$field['value'] 获得）添加left、center 和right 类。

然后您可以使用 jQuery（您可以将 <script> 放在同一个函数中）生成在 .click() 上更改类的轮播行为。

要保存数据，您应该有一个隐藏的 <input type="hidden"> 字段，该字段会在 click() 上更新，并且可以保存您的字段。

只是一个建议。

【讨论】：