Question

我正在为一家公司创建一个页面，在该页面上他们并排拥有4位创始人的照片。需要根据单击或悬停的照片来更改所有4张图像下的文本。因此，一个人用黑体字表示“商标”，并在其下具有他的资格。但是，当我单击下一张图片的“ kim”时，将全部替换。我是HTML，CSS的新手，并且从未尝试使用javascript，所以这是我的第一次尝试。

我希望以所需的方式设置文本的样式，但我找不到更新所有样式的方法。我只是发现我可以打印原始文本。有没有一种方法可以调用div来放置文本，并为每次图片点击将其替换为新的div？

就像不用编写.html（“ Mark do 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() {
    var elementToClone = document.getElementById('tr1');
    var clone = elementToClone.cloneNode(true);
    var container = document.getElementById('container');

    // Then you need to append that cloned element into a container on the page.

    container.appendChild(clone);       
});

容器将是您HTML中当前不存在的en元素。这只是您要复制的HTML放入的地方：

<div id="container></div>

这将使您进入复制所需HTML并将其放置在页面上所需位置的位置。单击其他图像时，需要删除此HTML，克隆 other HTML并将其附加到container。您可能还需要在其中使用if语句来检查container是否已包含某些内容。

您在问题中使用的是jQuery，因此此答案使用了jQuery click函数-如果您不包括jQuery，则将需要它。

您还可以使用以下香草js点击方法：

<img id="Mark" onclick="doHTMLAppendFunction()" src="foo.jpg" />

或

document.getElementById('Mark').addEventListener('click', doHTMLAppendFunction);

Answer 2

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

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

Answer 3

您正在尝试使用JQuery来实现此目标，然后执行此工作。使用通用类“ trainer-text”隐藏所有叠加文本以隐藏在起始点。使用一些CSS来使图像上的文本。请参考以下内容来实现。 https://www.w3schools.com/howto/howto_css_image_overlay.asp

/*
    Use the following if you need display text for hover event
*/
$("#Mark").mouseover(function(){
    $("#tr1").css("display", "block");
});
$("#Mark").mouseout(function(){
    $("#tr1").css("display", "none");
});
$("#Kim").mouseover(function(){
    $("#tr2").css("display", "block");
});
$("#Kim").mouseout(function(){
    $("#tr2").css("display", "none");
});

/*
    Use the following if you need display text for click event
*/
$('#Mark').click(function() {
    $('#tr1').show();
    $('#tr2').hide();
});

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

.trainer-text {
  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</b></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" class="trainer-text">
        <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" class="trainer-text">
        <h1><b><br>Kim</b></h1>
        <p>Kim is a nutritionist</p>
        <a class="btn" href="#">Book With Kim</a>
    </div>
</div>

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

3 个答案: