if语句使用jQuery':visible'不返回boolean

时间:2016-08-17 20:26:43

标签: javascript jquery html if-statement visible

我在这里创造了一个小提琴https://jsfiddle.net/c2gjh43j/3/。我正在使用

if ( !target.siblings("aside").is(":visible") ) {

检查目标的'旁边'兄弟是否不可见,但它总是返回true,即使我的javascript已显示'aside'元素。因此,我的其他声明将无法运行。你可以看到点击小提琴中的一个框会显示隐藏的元素但是当它可见时,你应该可以点击该框并隐藏它。我做错了什么?

1 个答案:

答案 0 :(得分:1)

嗯,你把你的优先事项混合在一起并且有很多想法,你忘了把命令添加到"否则"声明(隐藏和删除类)。我还删除了" show"在这条线下面:

$(this.resource).removeClass("active");

我修改了你的代码,我希望这可以像你想要的那样工作。其他文件完好无损,只有js文件修改如下:

Services = {
    resource: "#resources-grid .resource",
    resourceTrigger: "#resources-grid .resource .full-link",
    description: ".description",
    init: function() {
        $(this.resourceTrigger).click(this.toggleResource.bind(this));
    },

    toggleResource: function(e) {
        $(this.resource).removeClass("active");

        var target = $(e.target);

        if ( !target.siblings("aside").is(":visible") ) {
            console.log("yes");

            // Edit START
            $("aside").hide();
            // Edit END

            target.siblings("aside").show();
            target.parents(".resource").addClass("active");
        } else {
            console.log("no");
            target.siblings("aside").hide();
            target.parents(".resource").removeClass("active");
        }
    },
}
Services.init();

作为旁注,请尝试使用任务评论您的代码"待办事项:"并缩进你的代码。

希望我帮助过你!

修改 加上这个:

$("aside").hide();

target.siblings("aside").show();