0

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

即使您一切正常，我的代码似乎也很长，无法完成看似简单的任务。我似乎重复了很多功能，例如：

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

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

http://jsfiddle.net/fy4NP/

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

谢谢！

4

3 回答 3

5

您的代码将受益于使用类来识别元素组，而不必单独访问它们。尽管有一些巧妙的解决方法，但我建议使用类在单个操作中针对类似项目。

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

演示

于 2012-12-04T10:50:13.003 回答
4

为它们添加一个类，例如country，这样您就可以将代码更改为：

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

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

于 2012-12-04T10:47:05.690 回答
3

使用通用选择器：

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

最好给他们一个类，如country，在这种情况下，您将使用：

//hide all divs
$('.country').hide();
于 2012-12-04T10:46:14.737 回答