Question

我是一名设计师，他试图通过开发我自己的网站来学习ajax / js，并且在通过表单选择功能加载外部网址时遇到问题。

问题。 我在左侧有一组图标，使用ajax加载URL并将变量传递到导航右侧的表单选择。这很好用。从下拉列表中选择值时，表单选择功能不会加载URL。

链接到测试http://www.diztinct.co.uk/clients/Diztinct/home.html（黄色横幅下的功能）

html的部分

      <div class="panel-holder">
                <ul id="quick-filter" class="rubrics">
                    <li><a data-filter="web-design" data-filter-url="inc/web-design.html" href="#"><span>Web Design</span></a></li>
                    <li><a data-filter="responsive-design" data-filter-url="inc/responsive-web-design.html" class="respsonive-design tooltip" href="#"><span>Respsonive</span></a></li>
                    <li><a data-filter="user-interface-design" data-filter-url="inc/user-interface-design.html" class="ui-design tooltip" href="#"><span>UI Design</span></a></li>
                    <li><a data-filter="brand-identity-design" data-filter-url="inc/brand-identity-design.html" class="brand tooltip" href="#"><span>Brand</span></a></li>
                    <li><a data-filter="creative-production" data-filter-url="inc/creative-production-design.html" class="creative tooltip" href="#"><span>Creative</span></a></li>
                </ul>
                <form id="filter-form" class="request-form" action"#">
                    <fieldset>
                        <select id="filter-select" >
                            <option value="all" data-filter-url="inc/list.html" title="images/ico1.png">Recent Updates</option>
                            <option value="brand-identity-design" data-filter="brand-identity-design" data-filter-url="inc/brand-identity-design.html" title="images/ico2.png" href="#" >Brand Identity</option>
                            <option value="web-design" data-filter="web-design" data-filter-url="inc/web-design.html" title="images/ico3.png">Web Design</option>
                            <option value="responsive-design" data-filter="responsive-design" data-filter-url="inc/responsive-web-design.html" title="images/ico4.png" >Responsive Design</option>
                            <option value="user-interface-design" data-filter="user-interface-design" data-filter-url="inc/user-interface-design.html" title="images/ico5.png">User Interface Design</option>
                            <option value="creative-production" data-filter="creative-production" data-filter-url="inc/creative-production-design.html" title="images/ico6.png">Creative Production</option>
                        </select>
                    </fieldset>
                </form>
      </div>

的js。我怀疑我在filterSelect.change（function（）？

中错过/搞砸了什么

//initFilter
function initFilter() {
var filterForm = jQuery('#filter-form');
var filterSelect = jQuery('#filter-select');
var filterIcons = jQuery('#quick-filter a');
var listItems = jQuery('#item-list');
var ajaxRequest;

filterIcons.bind('click', function(e) {
    e.preventDefault();
    var value = this.getAttribute('data-filter');
    filterBox(value, this.getAttribute('data-filter-url'));
    filterSelect.val(value);
    if (filterSelect.length && filterSelect[0].jcf) {
        filterSelect[0].jcf.refreshState();
    }
});

filterSelect.change(function() {
    filterBox(this.value, this.getAttribute('data-filter-url'));
});

function filterBox(value, url) {
    if (ajaxRequest) {
        ajaxRequest.abort();
    }
    listItems.addClass('loading');
    ajaxRequest = jQuery.ajax({
        url: url,
        data: 'ajax=true&' + 'filter=' + value,
        dataType: 'text',
        type: 'get',
        success: function(data) {
            var newContent = jQuery('<div>', {
                html: data
            });

            listItems.empty();
            listItems.removeClass('loading');
            listItems.append(newContent.children());
            listItems.sameHeight({
                elements: '>div',
                skipClass: 'noheight',
                multiLine: true,
                flexible: true
            });
        },
        error: function() {
            alert('AJAX Error!');
        }
    });
}

}

非常感谢任何帮助/建议或最佳实践教程的链接。

Answer 1

this事件处理程序中的

change()将引用您的<select>而不是所选的选项。尝试使用：

var opt = $(this).children(':selected');

// The following two lines are for debugging only:
alert(opt.val());
alert(opt.attr('data-filter-url'));

filterBox(opt.val(), opt.attr('data-filter-url'));

jQuery ajax选择表单加载网址无法正常工作

1 个答案: