Question

我要如何在同一个jQuery（document.ready）中组合以下两个不同的函数。第一个功能用于选取框功能，第二个功能是一些将显示在选取框上的文本。文本将从后端获取，此刻数据（文本）正在本地获取。未来将通过API从数据库中获取。所以我也想使用Ajax。页面完全加载后，应自动加载文本。但是我不知道适合用于Ajax的方法/属性（不是通过单击，隐藏或其他方式）。

HTML

<div class="col-lg-12">
    <div class="alert alert-info" role="alert">
        <div class="m-auto" style="width:100%">
            <span id="announcement"></span>
        </div>
    </div>
</div>

JS

$(document).ready(function(){
    //Function Marquee
    $('#announcement').textMarquee({
        mode:'loop'
    });

    //Function to load Text (I am stuck here)
    $.ajax({
        url: 'data/announcement.json',
        dataType : "json",
        contentType: "application/json",
        dataSrc : "data"
    });
});

Answer 1

要执行此操作，您需要先进行AJAX调用以获取文本，然后将其放入DOM中，然后实例化选取框。看起来像这样：

jQuery(function($) {
  $.ajax({
    url: 'data/announcement.json',
    contentType: "application/json",
    success: function(response) {
      $('#announcement').text(response.yourPropertyHere).textMarquee({
        mode: 'loop'
      });
    }
  });
});

请注意，在$.ajax()调用选项中，dataSrc不是有效的属性，在这种情况下dataType是无关紧要的，因为您在请求中未发送任何数据。

Answer 2

一旦ajax完成，使textMarquee函数执行预成型：

function getText(success){
    $.ajax({
        url: 'data/announcement.json',
        dataType : "json",
        contentType: "application/json",
        success:success
    });
}
getText(() => {
 $('#announcement').textMarquee({
        mode:'loop'
    });
})

有关Ajax功能的更多信息，请参见here

如何将jQuery函数与另一个Ajax函数结合？

2 个答案: