Question

我是Js初学者，这是我的代码（图片不一样，但它正是我想要的）：

        $('#img-expand').click(function () {
        $("#work-info").slideToggle("slow");
    });

    $('#img-expand_2').click(function () {
        $("#work-info_2").slideToggle("slow");
    });

看看这个：http://jsfiddle.net/vk7AE/1/

我希望当我点击图像时，会显示与此图像相关联的文本，如果单击其他图像，则前面的文本会消失，并且与所单击图像关联的新文本会出现在其中的地方。

事实上，我希望人们可以同时打开一个文本。

我希望您能包含/理解我的问题，并且您将能够帮助我。

问候。

Answer 1

DEMO

$('#img-expand').click(function () {
    $('[id^="work-info"]').hide();
    $("#work-info").slideToggle("slow");
});
$('#img-expand_2').click(function () {
    $('[id^="work-info"]').hide();
    $("#work-info_2").slideToggle("slow");
});

attribute-equals-selector

^ attribute-starts-with-selector

Description: Selects elements that have the specified attribute with 
a value beginning exactly with a given string.

$('[id^="work-info"]');从id

开始选择work-info的所有元素 OP的评论后

更新

DEMO

$('#img-expand').click(function () {
    $('[id^="work-info"]').not('#work-info').hide();
    $("#work-info").slideToggle("slow");
});
$('#img-expand_2').click(function () {
    $('[id^="work-info"]').not('#work-info_2').hide();
    $("#work-info_2").slideToggle("slow");
});

.not()

Answer 2

   $('#img-expand').click(function () {
        var slide = $("#work-info").is(":visible");

        $(".part-body-opacity p").slideUp();
        if(!slide)
           $("#work-info").slideToggle("slow");
    });

    $('#img-expand_2').click(function () {
        var slide = $("#work-info_2").is(":visible");

        $(".part-body-opacity p").slideUp();
        if(!slide)
           $("#work-info_2").slideToggle("slow");
    });

http://jsfiddle.net/vk7AE/5/

jQuery在关闭/隐藏时切换一个元素

2 个答案: