Question

我正在制作一个自定义下拉列表，只是想知道我是否可以获得一些建议，如何缩短/简化我的jQuery代码。我有两个列表做同样的事情，我有重复的代码，我知道这是长篇大论，真的不是一个好方法。

HTML：

<div class="custom-select list-one">
    <span>Select Option</span>
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
        <li>List Item 5</li>
        <li>List Item 6</li>
        <li>List Item 7</li>
        <li>List Item 8</li>
        <li>List Item 9</li>
        <li>List Item 10</li>
        <li>List Item 11</li>
        <li>List Item 12</li>
    </ul>
</div>


<div class="custom-select list-two">
    <span>Select Option</span>
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
        <li>List Item 4</li>
        <li>List Item 5</li>
        <li>List Item 6</li>
        <li>List Item 7</li>
        <li>List Item 8</li>
        <li>List Item 9</li>
        <li>List Item 10</li>
        <li>List Item 11</li>
        <li>List Item 12</li>
    </ul>
</div>

JavaScript的：

//Function for .list-one
$(function() {

    $('.custom-select.list-one').click(function() {
        $('.custom-select.list-one ul').slideToggle('fast');
    });

    $('.custom-select.list-one ul li').click(function() {
        $(this).addClass('selected');
        $('.custom-select.list-one span')
        .html($('.custom-select.list-one ul li.selected').html());
        $(this).removeClass('selected');
    });

});

// Function for .list-two
$(function() {

    $('.custom-select.list-two').click(function() {
        $('.custom-select.list-two ul').slideToggle('fast');
    });

    $('.custom-select.list-two ul li').click(function() {
        $(this).addClass('selected');
        $('.custom-select.list-two span')
        .html($('.custom-select.list-two ul li.selected').html());
        $(this).removeClass('selected');
    });

});

任何建议，谢谢！

-Big D

Answer 1

以下似乎有效：

$(function() {

    $('.custom-select').click(function() {
        $(this).find('ul').slideToggle('fast');
    });

    $('.custom-select ul li').click(function() {
        var $this = $(this);
        $this.closest('div').find('span').html($this.html());
    });

});

这个想法是你不需要知道点击了哪个选项：无论是哪个，你只需使用$(this).find()找到它的子ul元素然后切换它。类似地，当单击li时，您只需使用.closest()找到它所属的div元素（您也可以使用.parent().parent()），然后从那里找到关联的span元素。

我还存储对$(this)返回的对象的引用，而不是每次需要时都重新创建它。

我注意到你向被点击的li元素添加了一个“selected”类，只是在之后立即用作选择器，然后再次删除它 - 你根本不需要它，因为你已经有了对被点击的引用this中的元素。

另请注意，您不需要两个document.ready处理程序：即使您的代码与重复一样，您也可以在单个document.ready中定义所有单击处理程序。

此外，我不会使用类（如“list-one”和“list-two”）来唯一标识每个列表：这就是id属性的用途。

演示：http://jsfiddle.net/dg7Lc/25/

Answer 2

基本上，您可以使用参数定义单个javascript函数，以帮助您确定要使用的列表。

// Function Definition
function doListStuff(listClass) {

    $(listClass).click(function() {
        $(listClass + ' ul').slideToggle('fast');
    });

    $(listClass +' ul li').click(function() {
        $(this).addClass('selected');
        $(listClass + ' span')
        .html($(listClass + ' ul li.selected').html());
        $(this).removeClass('selected');
    });

}

//Function for .list-one
$(function() {
    doListStuff('.custom-select.list-one');
});

//Function for .list-two
$(function() {
    doListStuff('.custom-select.list-two');
});

* 编辑 - 更新了我的代码以便工作（这次实际测试了！） * http://jsfiddle.net/3zL6t/5/

如何缩短或简化我的jquery语句？

2 个答案: