让用户为引导轮播选择不同的图片答案

【问题标题】：Have users choose different pictures for bootstrap carousel让用户为引导轮播选择不同的图片
【发布时间】：2015-08-20 02:20:28
【问题描述】：

我有一个带有引导轮播的登录页面，它在 3 张图片中旋转，文字在右侧。我的客户想要一个管理页面，我可以在其中显示可供选择的图片以及一个文本框，供他们输入自定义文本。我已经创建了页面供他们选择和添加文本，并使用 ColdFusion 将其插入 SQL DB。我已经运行了一个查询来获取记录，但是当我在轮播中执行cfloop 时，他们选择的三个图像一起显示。我什至不确定是否可以这样做。这是我的输出代码：

<div class="carousel-inner">
    <div class="item active">
        <div class="row">
            <cfloop query="getPreview">
                <div class="col-sm-6">
                    <img class="img-responsive center-block" data-id="0" src="#getPreview.landingPage_image#" alt="" width="300" height="200"></img>
                </div>
                <div class="col-sm-4 text.center" style="margin: 5px;margin-top: 50px;font-size: 18px">#getPreview.img_text#</div>
                <div class="item">
                    <div class="col-sm-6">
                        <img data-id="2" src="#getPreview.landingPage_image#" alt="" width="440" height="325" style="margin: -10px;">
                    </div>
                    <div class="col-sm-4 text.center" style="margin: 20px;margin-top: 50px;font-size: 18px">#getPreview.img_text#</div>
                </div>
                <div class="item">
                    <div class="col-sm-6">
                        <img data-id="3" src="#getPreview.landingPage_image#" alt="" width="440" height="325" style="margin: -10px;">
                    </div>
                    <div class="col-sm-4 text.center" style="margin: 20px;margin-top: 50px;font-size: 18px">#getPreview.img_text#</div>
            </cfloop>
        </div>
    </div>

【问题讨论】：

你说的 是什么意思，但是当我在轮播中执行 cfloop 时，他们选择的三个图像会一起显示。

标签： jquery twitter-bootstrap coldfusion

【解决方案1】：

您正在为查询的每个结果循环所有三个。

您需要删除其中两个项目并处理 data-id 标记，可能使用一个简单的计数器。

试试这样的：

<div class="carousel-inner">
    <div class="item active">
        <div class="row">

            <cfset counter = 1>
            <cfloop query="getPreview">
                <div class="item">
                    <div class="col-sm-6">
                        <img data-id="#counter#" src="#getPreview.landingPage_image#" alt="" width="440" height="325" style="margin: -10px;">
                    </div>
                    <div class="col-sm-4 text.center" style="margin: 20px;margin-top: 50px;font-size: 18px">#getPreview.img_text#</div>
                </div>
                <cfset counter = counter +1>
            </cfloop>
        </div>
    </div>

【讨论】：