Question

我正在尝试构建一个滑块编辑器，可以更改或删除网站中显示的幻灯片。我试图在弹出窗口中推送滑块的所有内容，其中内容可以编辑。我面临的问题是我已经将div滑入div，其类名是这样的：

主要内容：

<div class="carousel-inner" id="nitsslider">
            <div class="item active" style="background-image: url(../nits-img/global/templates/himu/slider/slide3.jpg)">
                <div class="carousel-caption">
                    <div>
                        <h2 class="heading animated bounceInDown">'Himu' Onepage HTML Template</h2>
                        <p class="animated bounceInUp">Fully Professional one page template</p>
                        <a class="btn btn-default slider-btn animated fadeIn" href="#">Get Started</a>
                    </div>
                </div>
            </div>
            <div class="item" style="background-image: url(../nits-img/global/templates/himu/slider/slide2.jpg)">
                <div class="carousel-caption">
                    <div>
                        <h2 class="heading animated bounceInDown">Get All in Onepage</h2>
                        <p class="animated bounceInUp">Everything is outstanding </p> <a class="btn btn-default slider-btn animated fadeIn" href="#">Get Started</a>
                    </div>
                </div>
            </div>
            <div class="item" style="background-image: url(../nits-img/global/templates/himu/slider/slide1.jpg)">
                <div class="carousel-caption">
                    <div>
                        <h2 class="heading animated bounceInRight">Fully Responsive Template</h2>
                        <p class="animated bounceInLeft">100% Responsive HTML template</p>
                        <a class="btn btn-default slider-btn animated bounceInUp" href="#">Get Started</a>
                    </div>
                </div>
            </div>
        </div>

我想将标题，段落和按钮内容等内容附加到可以编辑的框中。

我可以通过each function使用class="item"元素吗？我的意思是我想以下列格式附加内容：

动态内容：

<div class="tab-pane active" id="tab_15_1">
<div class="portlet-body">
    <div class="row">
        <div class="caption uplimg">
            <i class="fa fa-cloud-upload"></i>Change slide content
        </div>
        <div class="clearfix"></div>
        <div class="form-body">
            <label class="control-label col-md-3">Change Image</label>
            <div class="col-md-4">
                <div class="tiles">
                    <div class="tile image selected">
                        <div class="tile-body">
                            <img src="../../assets/admin/pages/media/gallery/image2.jpg" alt="">
                        </div>
                        <div class="tile-object">
                            <div class="name">
                                Media
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                <label class="control-label col-md-3">Heading</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" maxlength="25" name="defaultconfig" id="maxlength_defaultconfig">
                    <span class="help-block">
  Enter Slider heading. Maxlength is 25 chars.</span>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                <label class="control-label col-md-3">Content</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" maxlength="25" name="defaultconfig" id="maxlength_defaultconfig">
                    <span class="help-block">
  Enter Slider content. Maxlength is 25 chars.</span>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                <label class="control-label col-md-3">Button text</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" maxlength="25" name="defaultconfig" id="maxlength_defaultconfig">
                    <span class="help-block">
  Enter button text. Maxlength is 25 chars.</span>
                </div>
            </div>
        </div>
    </div>
</div>

输入框中包含主要内容的值。

Answer 1

我尝试将值放在数组中并执行每个语句以附加值。以下是我使用的代码：

$('#nitsslider > .item').each(function (i) {
    var sliderimage = [];
    var sliderheading = [];
    var sliderpara = [];
    var sliderbutton = [];
    sliderimage[i] = $(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
    sliderheading[i] = $(this).find('h2').text();
    sliderpara[i] = $(this).find('p').text();
    sliderbutton[i] = $(this).find('a').text();

 and append the dynamic content....

});

如何按类计算元素并使用循环在JQuery

1 个答案: