jQuery鏈接 - 我可以寫更乾淨的代碼嗎？

我正在慢慢地圍繞jQuery和每天學習更多，然而我不知道如果我可以創建更乾淨的代碼。我聽說過'鏈接'，但不知道我是如何運用它的。jQuery鏈接 - 我可以寫更乾淨的代碼嗎？

下面是我寫的一個工作jQuery，但雖然它的工作原理，我可以通過鏈接它來減少它/使它更清潔嗎？

該腳本刪除按鈕點擊類，並添加另一個類，同時隱藏另一個div。最後，我添加了keydown事件以及按鈕按鈕。

<script type="text/javascript"> 
$('button').click(function(e) { 
if ($(this).hasClass('grid')) { 
$('#primary ul').removeClass('stylelist').addClass('grid'); 
$('#primary ul .single-style-text').hide(); 

     } 
else if($(this).hasClass('list')) { 
$('#primary ul').removeClass('grid').addClass('stylelist'); 
$('#primary ul .single-style-text').show(); 
     } 
    }); 
$(document).bind('keydown', function(e) { 
    if (e.which == 71) { 
     $('#primary ul').removeClass('stylelist').addClass('grid'); 
     $('#primary ul .single-style-text').hide(); 
    } 
}); 
$(document).bind('keydown', function(e) { 
    if (e.which == 76) { 
     $('#primary ul').removeClass('grid').addClass('stylelist'); 
     $('#primary ul .single-style-text').show(); 
    } 
}); 
</script>

來源

2011-09-29 Richard James

可以將它只能是stylelist（或清單，不知道如果）和電網？ – voigtan

$('button').click(function(e) { 
    var ul = $('#primary ul'); 

    if ($(this).hasClass('grid')) { 
     ul.removeClass('stylelist').addClass('grid').find('.single-style-text').hide(); 
    } else if($(this).hasClass('list')) { 
     ul.removeClass('grid').addClass('stylelist').find('.single-style-text').show(); 
    } 

}); 

$(document).bind('keydown', function(e) { 
    var ul = $('#primary ul'); 

    if (e.which == 71) { 
     ul.removeClass('stylelist').addClass('grid').find('.single-style-text').hide(); 
    } else if (e.which == 76) { 
     $('#primary ul').removeClass('grid').addClass('stylelist').find('.single-style-text').show(); 
    } 
});

但如果它只是一個列表或網格你想切換你可以寫在兩行代碼。（每個事件），如：

$('button').click(function(e) { 
    var isGrid = $(this).hasClass('grid'); 
    $('#primary ul').removeClass(isGrid ? 'stylelist' : 'grid').addClass(isGrid ? 'grid' : 'list').find('.single-style-text')[isGrid ? 'hide' : 'show'](); 
});

來源

2011-09-29 20:45:45 voigtan

有一件事，你可以在那裏進一步鏈：

$('#primary ul') 
    .removeClass('stylelist').addClass('grid') 
    .find('.single-style-text').hide();

但有一兩件事，將讓你的代碼更好地將這些功能轉移到一個功能（即使刪除了一點鏈接）：

function switchView(view) { 
    var ul=$('#primary ul'); 
    ul.removeClass('stylelist').removeClass('grid'); 
    ul.addClass(view); 
    var singleStyleText=ul.find('.single-style-text'); 
    singleStyleText.hide(); 
    if(view=='stylelist') { 
     singleStyleText.show(); 
    } 
}

那麼你的事件處理程序看起來是這樣的：

$('button').click(function() { 
    if($('#primary ul').hasClass('grid')) { 
     switchView('stylelist'); 
    }else{ 
     switchView('grid'); 
    } 
    return false; 
}); 
$(document).bind('keydown', function(e) { 
    if(e.which == 71) { 
     switchView('grid'); 
    }else if(e.which == 76) { 
     switchView('stylelist'); 
    } 
});

來源

2011-09-29 20:36:13 icktoofay

^每次選擇微效率的可維護性。 – RSG

一些清理...

首先，我們可以結合這兩種KEYDOWN事件。真的不需要多次打電話，因爲你正在處理的是來自事件的價值。

<script type="text/javascript"> 
$('button').click(function(e) { 
    if($(this).hasClass('grid')) { 
    $('#primary ul').removeClass('stylelist').addClass('grid'); 
    $('#primary ul .single-style-text').hide(); 
    } 
    else if($(this).hasClass('list')) { 
    $('#primary ul').removeClass('grid').addClass('stylelist'); 
    $('#primary ul .single-style-text').show(); 
    } 
}); 

$(document).bind('keydown', function(e) { 
    if (e.which == 71) { 
     $('#primary ul').removeClass('stylelist').addClass('grid'); 
     $('#primary ul .single-style-text').hide(); 
    } 
    if (e.which == 76) { 
     $('#primary ul').removeClass('grid').addClass('stylelist'); 
     $('#primary ul .single-style-text').show(); 
    } 
}); 
</script>

現在，你正在做很多重複的工作......如何通過將函數包裝到一個函數中來最小化呢？現在

，我可能已經變得有點忘乎所以......

<script type="text/javascript"> 
$('button').click(swapClasses()); 

$(document).bind('keydown', function(e) { 
    if (e.which == 71) { 
     $('#primary ul').removeClass('stylelist').addClass('grid'); 
     $('#primary ul .single-style-text').hide(); 
    } 
    else if (e.which == 76) { 
     $('#primary ul').removeClass('grid').addClass('stylelist'); 
     $('#primary ul .single-style-text').show(); 
    } 
}); 

swapClasses = function() { 
    $('#primary ul').toggleClass('stylelist').toggleClass('grid'); 
    $('#primary ul .single-style-text').toggle(showOrHide); 
} 
</script>

看起來一丁點兒的清潔......

來源

2011-09-29 20:51:12 stslavik

至於鏈接去，我不認爲有多少改變。我會改變一些東西，雖然...

你的document.ready在哪裏？
緩存您的選擇器，以便它們可以重複使用。

使用更具體的選擇器。而不僅僅是指定類。

<script type="text/javascript"> 
$(function(){ 
    var primary = $('#primary ul'); 
    var single_style_text = primary.find('.single-style-text'); 

    $('button.grid','button.list').click(function(e) { 
     if ($(this).hasClass('grid')) { 
      primary.removeClass('stylelist').addClass('grid'); 
      single_style_text.hide(); 

     } 
     else if($(this).hasClass('list')) { 
      primary.removeClass('grid').addClass('stylelist'); 
      single_style_text.show(); 
     } 
    }); 

    $(document).bind('keydown', function(e) { 
     if (e.which == 76) { 
      primary.removeClass('grid').addClass('stylelist'); 
      single_style_text.show(); 
     } 

     if (e.which == 71) { 
      primary.removeClass('stylelist').addClass('grid'); 
      single_style_text.hide(); 
     } 
    }); 
}) 
</script>

來源

2011-09-29 21:01:03

jQuery鏈接 - 我可以寫更乾淨的代碼嗎？

回答

相關問題