javascript - 单击/悬停图像时如何更改图像下的文本

Question

我正在为一家公司创建一个页面，其中并排放置着 4 位创始人的照片。所有 4 张图像下的文本都需要根据单击或悬停在什么照片上进行更改。所以一个人用粗体说“标记”，下面会有他的资格。但是，当我单击下一张图片的“kim”时，所有这些都将被替换。我对 HTML、CSS 非常陌生，并且从未尝试过 javascript，所以这是我的第一次尝试。

我希望文本按照我想要的方式设置样式，但我找不到更新所有内容的方法。我只是发现我可以打印原始文本。有没有办法调用一个 div 来将文本放在那里，并在每次点击图片时用一个新的 div 替换它？

就像不是写 .html("Mark does xyz") 你可以用更改的按钮、标题和段落粘贴到整个 div“tr1”？

<div id="trainers">
        <h1><b>Meet Our Trainers</h1>
        <img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
        <img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">


<div id="tr1">
  <h1><b><br>Mark</b></h1>
  <p>Mark has been a personal trainer</p>
  <a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
  <h1><b><br>Kim</b></h1>
  <p>Kim is a nutritionist</p>
  <a class="btn" href="#">Book With Kim</a>
</div>
</div>






<script>
    $('#Mark').click(function() {
    });

    $('#Kim').click(function() {
    });

</script>

Answer 1

您可以根据需要使用显示/隐藏方法。

$('#Mark').click(function() {
   $('#tr1').show();
   $('#tr2').hide();
});

$('#Kim').click(function() {
   $('#tr1').hide();
   $('#tr2').show();
});

$('#Mark').click(function() {
       $('#tr1').show();
       $('#tr2').hide();
    });

    $('#Kim').click(function() {
       $('#tr1').hide();
       $('#tr2').show();
    });

#tr2{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
        <h1><b>Meet Our Trainers</h1>
        <img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
        <img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">


<div id="tr1">
  <h1><b><br>Mark</b></h1>
  <p>Mark has been a personal trainer</p>
  <a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
  <h1><b><br>Kim</b></h1>
  <p>Kim is a nutritionist</p>
  <a class="btn" href="#">Book With Kim</a>
</div>
</div>