Question

所以我要做的就是在点击第一张图片时隐藏第二张图片和信息我已经使用了.toggle并设置了CSS隐藏的样式属性但是如果你点击这两张图片那么它就会然而，当点击第一张图像时，我想隐藏信息和图像重新划分第二张图像，当点击第二张图像时，只显示相对于第二张图像的信息

抱歉，如果你点击jsfiddle中的两个图像然后点击第一张图片，我的问题有点模糊，你会明白我的意思。我也是javascript和jquery的新手

http://jsfiddle.net/dc234561/2rAc5/

HTML代码

 <img name="MP" id="mp"  src="img/gorillaz-plasticbeach.jpg" data-artist="Gorillaz" data-album="Plastic Beach" alt=""/>
                <img src="img/kingsofleon-comearoundsunshine.jpg" id="mp2" data-artist="Kings Of Leon" data-album="Come Around Sunshine"/>


 <div class="content-1"> 
                 <h2>About us</h2>

    <img id="loadingImage" src="img/brunomars-doowopsandhooligans.jpg" width="100" height="100" style="display:none"/>
    <img id="loadingImage2" src="img/ironmaiden-thefinalfrontier.jpg" width="100" height="100" style="display:none"/>


               <p style="display:none" id="p1">....</p> 

                        <p style="display:none" id="p2">...1 </p>

javascript / Jquery

$(document).ready(function () {
    $("#mp").click(function () {
        $("#loadingImage").toggle("slow");
        $( "#p1" ).toggle( "slow" );
    });
})
$("#mp2").click(function () {
        $("#loadingImage2").toggle("slow");
        $( "#p2" ).toggle( "slow" );
        });

Answer 1

设置它可能是一种更有效的方法，但您可以在点击时验证其他图片和段落元素的可见性，并在它们可见时切换它们。

$(document).ready(function () {
    $("#mp").click(function () {
        $("#loadingImage").toggle("slow");
        $( "#p1" ).toggle( "slow" );
        if ($("#loadingImage2").is(":visible")) {
            $("#loadingImage2").toggle("slow");
            $( "#p2" ).toggle( "slow" );
        }
    });
})

为简单起见，您可以创建一个负责切换的功能，以便您编写重复性较低的代码。

修改：http://jsfiddle.net/Ksbv4/

    $(document).ready(function () {
        // Make sure all your images that you're clicking on have an ID
        // that starts with loadingImage_ and then a unique number
        $("[id^='loadingImage_']").click(function () {
            // Onclick call your function and pass the id of the element clicked
            toggleLoading($(this).attr("id"));
        })
        function toggleLoading(id) {
            // If this id's matching class is already visible don't do anything
            if (!$("." + id).is(":visible")) {
                // If it isn't, insure that all the elements are hidden
                $("[class*=loadingImage_]").hide();
                // Toggle the elements whose class matches the id of the one clicked.
                $("." + id).toggle("slow");
            }
        }
    });

修改HTML：

<img id="loadingImage_1" src="img/gorillaz-plasticbeach.jpg" data-artist="Gorillaz" data-album="Plastic Beach"/>
<img id="loadingImage_2" src="img/kingsofleon-comearoundsunshine.jpg" data-artist="Kings Of Leon" data-album="Come Around Sunshine"/>

<h2>About us</h2>

<img class="loadingImage_1" src="img/brunomars-doowopsandhooligans.jpg" width="100" height="100" style="display:none"/>
<img class="loadingImage_2" src="img/ironmaiden-thefinalfrontier.jpg" width="100" height="100" style="display:none"/>


<p style="display:none" class="loadingImage_1">....</p>
<p style="display:none" class="loadingImage_2">...1</p>

小提琴：http://jsfiddle.net/23aj9/2/

Answer 2

许多可能的解决方案。这对你有用吗？

$(document).ready(function () {
    $("#mp").click(function () {
        $("#loadingImage").toggle("slow");
        $( "#p1" ).toggle( "slow" );
        $("#loadingImage2").hide();
        $("#p2").hide();
    });
})
$("#mp2").click(function () {
        $("#loadingImage2").toggle("slow");
        $( "#p2" ).toggle( "slow" );
        $("#loadingImage").hide();
        $("#p1").hide();
        });

如何仅显示与图像相关的内容？

2 个答案: