Javascript 根据按下的按钮，在模式中打开不同的内容

我有一个简单的模式，我设法获得多个链接（按钮）来触发模式，但是，我还需要根据按下的链接（按钮）将不同的内容加载到模式中所以我有几个链接：

<a class="myBtn" href="#">Cats</a>

<a class="myBtn" href="#">Dogs</a>

    <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close"><img src="svg/close.svg"></span>
                    <div class="modal-header clearfix">
                        <h3">Cats</h3>
                    </div>
                    <div class="modal-body">
                        <h4>The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner.</h4>
                    </div>
                </div>
            </div>  


<div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close"><img src="svg/close.svg"></span>
                    <div class="modal-header clearfix">
                        <h3">Dogs</h3>
                    </div>
                    <div class="modal-body">
                        <h4>The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner.</h4>
                    </div>
                </div>
            </div> 

我有自己的内容分类：

<a class="myBtn" href="#">Cats</a>

<a class="myBtn" href="#">Dogs</a>

    <div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close"><img src="svg/close.svg"></span>
                    <div class="modal-header clearfix">
                        <h3">Cats</h3>
                    </div>
                    <div class="modal-body">
                        <h4>The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner.</h4>
                    </div>
                </div>
            </div>  


<div id="myModal" class="modal">
                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close"><img src="svg/close.svg"></span>
                    <div class="modal-header clearfix">
                        <h3">Dogs</h3>
                    </div>
                    <div class="modal-body">
                        <h4>The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner. The Skipper will do his very best to make the others comfortable in their tropic island nest. Michael Knight is a young loner.</h4>
                    </div>
                </div>
            </div> 

有各种各样的解决办法


“严格使用”；
const animalLinks=document.querySelectorAll（“[data animal link]”）；
const animalModals=document.queryselectoral（“[data animal model]”）；
document.addEventListener（'单击'，（evt）=>{
evt.preventDefault（）；
const target=evt.target；
if（target&&target.matches（“[数据动物链接]”））{
让value=target.dataset.animalLink；
//检查目标
console.log（值）
动物模型。forEach（（项目）=>{
if（item.dataset.animalModal==值）{
item.style.display='block'；
}
});
}
});
#myModal{
显示：无；
宽度：100px；
高度：100px；
}
[数据动物模态='猫']{
背景色：番茄；
}
[数据动物模态='狗']{
背景颜色：金色；
}

非常感谢您。我实现了您的代码，并使其工作到一定程度，它为每个按下的按钮显示相同的内容。它不能为每个不同的按钮提供不同的内容。在您的示例中，我看不出它是否有效，因为两个框都是红色的应该有与常量匹配的动物模型。我想知道是否还有其他可能是打字错误或需要更正的内容，以使此脚本正常工作？谢谢you@James我修复CSS类并将
const
value更改为
let
value。并添加
console.log（value）
以检查目标。