javascript - 如何只显示与图像相关的内容？

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/J查询

$(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>

fiddle :http://jsfiddle.net/23aj9/2/