重复功能

Question

我正在学习J查询并建立一个小项目来帮助自学。

即使你的一切运作良好，我的代码似乎也很长，看似简单的任务。我似乎重复了很多功能，如：

$("#england").click(function () {

    $('#englandTxt').hide();
    $('#northernIrelandTxt').hide();
    $('#walesTxt').hide();
    $('#scotlandTxt').hide();
    $('#irelandTxt').hide();
    $('#onLoad').hide();
    $("#englandTxt").fadeIn("slow");
     });  

http://jsfiddle.net/fy4NP/

我将如何有效地整理这个？

thxs！

Answer 1

您的代码将受益于使用类来识别元素组，而不是必须单独访问它们。虽然有一些聪明的解决方法，但我建议在一次操作中使用类来定位类似的项目。

$('.link').click(function(){
    $('.txt').hide();
    $('#' + $(this).attr('id') + 'Txt').fadeIn();
});​

Demo

Answer 2

向所有人添加课程，例如country，以便您可以将代码更改为：

$("#england").click(function () {
    $('.country:not(#englandTxt)').hide();
    $("#englandTxt").fadeIn("slow");
}); 

使用

:not()选择器，这样如果两次点击英格兰，它将不会fadeIn两次。

Answer 3

使用常用选择器：

//hide all divs
$('div').hide();

最好给他们一个像country这样的课程，在这种情况下你会使用：

//hide all divs
$('.country').hide();