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

因此，我试图做的是在单击第一个图像时隐藏第二个图像和信息。我已经使用了。切换并设置CSS隐藏样式属性。但是，如果您同时单击这两个图像，那么它将同时显示这两个。但是，当单击第一个图像时，我想隐藏信息和图像，重新对第二个图像进行分级并且当点击第二图像时，仅显示与第二图像相关的信息

ps抱歉，如果我的问题有点模糊，如果您在JSFIDLE中单击两个图像，然后单击第一个图像，您将了解我的意思。我也是javascript和jquery的新手

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>

---

可能有一种更有效的方法来设置它，但您只需在单击时验证其他图像和段落元素的可见性，并在它们可见时切换它们

$(document).ready(function () {
    $("#mp").click(function () {
        $("#loadingImage").toggle("slow");
        $( "#p1" ).toggle( "slow" );
        if ($("#loadingImage2").is(":visible")) {
            $("#loadingImage2").toggle("slow");
            $( "#p2" ).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>

关于我们

…1

---

小提琴：许多可能的解决方案。这对你有用吗

$(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();
        });

---

也许你可以用。对不起，我看不懂你的全部问题。很抱歉，谢谢你的评论，我真的不知道如何表达这个问题。还有，我怎样才能将它合并到代码中呢？我需要说.css.sibling（#loadimages）之类的东西吗？比如说var=toggle之类的东西？此外，代码似乎适用于JSFIDdle中的第一个图像，而不是第二个图像修复了小提琴，忘记了保存它。我将在一分钟内更新。添加了一个使用函数为您完成工作的示例（可能并不完美）。只要您保持命名约定不变，就应该能够根据需要添加尽可能多的不同内容。谢谢你的时间和帮助，这正是我想要的。但是，有没有一种方法可以在不重复类似代码的情况下对多个映像执行此操作？是否尝试使用引导？它的功能与你所需要的相似，还有很好的css特性。还没有，我一定会去看看。谢谢你的时间和帮助

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

$(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();
        });