如何縮短或簡化我的jquery語句？

Question

我正在做一個自定義下拉，我只是想知道如果我可以得到一些建議，如何縮短/簡化我的jQuery代碼。我有兩個做同樣的事情的列表，我有代碼重複，我知道這是很長的囉嗦，真的不是一個好方法。

例如：http://jsfiddle.net/dg7Lc/22/

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'); 
    }); 

}); 

任何意見，謝謝！

- 大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()（您也可以使用.parent().parent()）找到它所屬的div元素，然後從中找到關聯的span元素。

我還存儲對由$(this)返回的對象的引用，而不是每次需要時都重新創建它。

我注意到你在被點擊的li元素中添加了一個「selected」類，只是在之後立即用作選擇器，然後再次刪除它 - 你完全不需要它，因爲你已經有了對點擊this中的元素。

另請注意，您不需要兩個document.ready處理程序：即使您的代碼具有重複功能，您也可以在單個document.ready中定義所有的click處理程序。

此外，我不會使用類（如「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/