Question

我有一个登陆页面，带有自举旋转木马旋转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>

Answer 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>

让用户为bootstrap carousel选择不同的图片

1 个答案: