jQuery xmlParser列出滑块或按钮指定的结果

jQuery xmlParser to list results specified by slider or buttons

本文关键字：按钮 结果 xmlParser jQuery      更新时间：2023-09-26

我想修改xmlParser返回多少数据结果的方式。我已经发现使用：

:lt()

例如：

 $(xml).find("override:lt(10)").each(function () {

允许我从xml文件返回第一个X数量的结果。我接下来要做的是有一组按钮或滑块，允许用户选择要添加的更多结果。有人能告诉我正确的方向吗。

我在HEAD内容中也有这个的javascript，对吗？

编辑并添加到下方

我最初的完整代码：

<script type="text/javascript">
    var xml;
    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "../_/xml/sgr_or.xml",
            dataType: "xml",
            success: xmlParser
        });
    });
    function xmlParser(data) {
        xml = data;
        $('#load').fadeOut();
    $(xml).find("sgr_or").each(function () {
            var lastmod = $(this).find("lastmodified").text();
        $("#lastmodified").append(lastmod);
        });
        $(xml).find("override:lt(25)").each(function () { //lt returns the desired number of results
            sgr = $(this).attr("sgr_or");
            var location = $(this).find("location").text();
            var keyserial = $(this).find("keyserial").text();
            var datestamp = $(this).find("datestamp").text();
            var notes = $(this).find("notes").text();
            var part = $(this).find("part").text();
            var defect = $(this).find("defect").text();
            var operator = $(this).find("operator").text();
            var colour =$(this).find("colour").text();
    $("#list").append('<li><a id="'+colour+'_override" rel="external" href="#dialog-overrides" data-transition="slide"><img src="../_/images/authorisers/'+operator+'.jpg" alt="'+operator+'"><h4 id="line1info">'+keyserial+" @ "+location+'</h4><p>'+datestamp+" "+part+" "+defect+'</p></a></li>');
        $('#list').listview('refresh');
        });
    }

基本上我很困惑，因为当我在函数停止工作后删除（数据）时，我以为我理解解析器方法，但似乎不。。。我已经尝试了很多方法，但仍然无法使其发挥作用，你能解释一下我是如何去掉（数据）并添加（var）的吗？

很抱歉我看起来知之甚少，我正在努力学习。。。

使用一个选择框，您就可以得到这个。

HTML

<select class='select'>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40">40</option>
</select>

更新的JS：稍后可以重构此代码，但请尝试此操作。解决方案

  <script type="text/javascript">
            var xml;
            $(document).ready(function(){
                $.ajax({
                    type: "GET",
                    url: "../_/xml/sgr_or.xml",
                    dataType: "xml",
                    success: xmlParser
                });
            });
            function xmlParser(data) {
                xml = data;
                $('#load').fadeOut();
                $(xml).find("sgr_or").each(function () {
                    var lastmod = $(this).find("lastmodified").text();
                    $("#lastmodified").append(lastmod);
                });
                display(25); // inital value to display
            }
    function display(val){
        var liHTML = '', sgr, location, keyserial, datestamp, notes, part, defect, operator, colour;
        $(xml).find("override:lt(" + val + ")").each(function () {
            sgr = $(this).attr("sgr_or");
            location = $(this).find("location").text();
            keyserial = $(this).find("keyserial").text();
            datestamp = $(this).find("datestamp").text();
            notes = $(this).find("notes").text();
            part = $(this).find("part").text();
            defect = $(this).find("defect").text();
            operator = $(this).find("operator").text() !== 'unknown' ? 'name_of_placeholder';
            colour =$(this).find("colour").text();
            liHTML += '<li><a id="'+colour+'_override" rel="external" href="#dialog-overrides" data-transition="slide"><img src="../_/images/authorisers/'+operator+'.jpg" alt="'+operator+'"><h4 id="line1info">'+keyserial+" @ "+location+'</h4><p>'+datestamp+" "+part+" "+defect+'</p></a></li>'
        });
        $("#list").html(liHTML).listview('refresh'); 
    }

            $('.select').on('change', function(e){
                val = e.target.value;
                display(val); // call on change
            });
    </script>

注意

不是最整洁的，但应该给你一个想法，并在路上帮助你。：）

另一次更新

JSFIDDLE，请检查链接。

相关文章：