Question

我有一个特定的页面，我正在显示两个差异项目，当您单击其中一个项目时，页面上的内容切换到该特定项目信息并隐藏其他项目信息。因此它简单来说就是一个标签系统，但我的问题是我想默认显示第一项信息，现在我的所有内容都是hiddn，直到我点击这两个项目中的一个。

以下是我对Jquery的看法：

$(".packBat:first").addClass("active");
$(".showWraps").hide();
$(".packBat .photoWrap").click(function () {
    var batpackData = $(this).closest('.packBat').metadata({
        type: 'attr',
        name: 'data'
    });
    $(".packBat").removeClass("active");
    $(this).closest('.packBat').addClass("active");
    $('.showWraps').hide();
    $('.showWraps').each(function () {
        var wrapData = $(this).metadata({
            type: 'attr',
            name: 'data'
        });
        if (wrapData.productId == batpackData.productId) {
            $(this).fadeIn("fast");
        }
    });
});

Answer 1

绑定选择标签的click听众后，只需.click()您想要的那个。

$(".packBat .photoWrap").click(function () {
    // snip
}).first().click();

另一个快速的问题是，如果人们已经在项目内容上，我想要阻止fadin，因为现在如果你点击其内容已经显示的项目你得到一个快速闪光，但是因为它的已经是正确的内容

这是解决方案，以及其他一些清理工作：

var metaArgs = {type: 'attr', name: 'data'},
    ACTIVE = 'active';

$(".packBat .photoWrap").click(function () {
    var $this = $(this),
        $closest = $this.closest('.packBat');

    // no need to continue if the right one is already showing
    if ($closest.hasClass(ACTIVE)) return;

    var batpackData = $closest.metadata(metaArgs);

    $closest.addClass(ACTIVE).siblings().removeClass(ACTIVE);

    $('.showWraps').hide().each(function () {
        var wrapData = $(this).metadata(metaArgs);
        if (wrapData.productId == batpackData.productId) $(this).fadeIn("fast");
        return false; // cancel further iteration
    });
}).first().click();

Jquery在页面加载时显示匹配的内容

1 个答案: