Question

我遇到了使用bxslider动态更新内容的问题。我可以通过在HTML中输入li项来成功加载内容。当我尝试使用数据库中的新li内容追加或替换ul html时，无法重新加载滑块。这是我脚本中的重要标记。我有没有理由在console.log中没有错误，没有图片或幻灯片？

var url = 'image/picture.jpg';
updateSlider('<li><img src=\''+url+'\'></li>');

var slider, sliderConfig = {
    pager: true,
    pagerType: 'short',
    auto: true,
    slideWidth: screen.width,
    onSliderLoad: function(){
    $('.bx-viewport').css({'height':'100% !important'});}}

$(function(){
    slider = $('.bxslider').bxSlider(sliderConfig);
});

function updateSlider(data){
   $('.bxslider').html(data);
   slider.reloadSlider(sliderConfig);
}

Answer 1

尝试这样，意味着只有在使用任何延迟函数（如ajax）获取数据后才调用var userName = ((this.LoginView1.FindControl("username") as TextBox).Text; //... switch (result) { case SignInStatus.Success: var loggedInUser = manager.FindByName(userName); //Do your log with loggedInUser! IdentityHelper.RedirectToReturnUrl(Request.QueryString["ReturnUrl"], Response); break; //... }。我已准备好文档但你需要在成功的ajax请求后运行：

<div class="container">
<div class="panel panel-default">
<script id="video-template" type="text/x-handlebars-template">
{{#each items}}
<div class="panel-heading">
<h3 class="panel-title">{{snippet.title}}</h3>
</div>
<div class="panel-body">
{{someFunction id}}
<div id="element-{{id}}"></div>
</div>
{{/each}}
</script>
</div>
</div>

<script>
Handlebars.registerHelper('someFunction', function(id) {
console.log(document.getElementById("element-"+id));
});
</script>

Answer 2

我找到了答案，谢谢你的建议。

问题在于CSS。重新加载滑块后，CSS在.bx-wrapper，.bx-viewport，.bxslider和.bxslider li元素上设置为0。一旦我将它们重置到必要的高度，它就解决了我的问题。

/// normalized version of string for comparisons and database lookups.  If normalization fails or results in an empty string, original string is returned.
var normalized: String? {
    // expand ligatures and other joined characters and flatten to simple ascii (æ => ae, etc.) by converting to ascii data and back
    guard let data = self.data(using: String.Encoding.ascii, allowLossyConversion: true) else {
        print("WARNING: Unable to convert string to ASCII Data: \(self)")
        return self
    }
    guard let processed = String(data: data, encoding: String.Encoding.ascii) else {
        print("WARNING: Unable to decode ASCII Data normalizing stirng: \(self)")
        return self
    }
    var normalized = processed

    //  // remove non alpha-numeric characters
    normalized = normalized.replacingOccurrences(of: "?", with: "") // educated quotes and the like will be destroyed by above data conversion
    // strip appostrophes
    normalized = normalized.replacingCharacters(in: "'", with: "")
    // replace non-alpha-numeric characters with spaces
    normalized = normalized.replacingCharacters(in: CharacterSet.alphanumerics.inverted, with: " ")
    // lowercase string
    normalized = normalized.lowercased()

    // remove multiple spaces and line breaks and tabs and trim
    normalized = normalized.whitespaceCollapsed

    // may return an empty string if no alphanumeric characters!  In this case, use the raw string as the "normalized" form
    if normalized == "" {
        return self
    } else {
        return normalized
    }
}

jQuery bxslider动态更新无法正常工作

2 个答案: