javascript - JQuery:将最近的 img alt 应用到最近的段落

Question

我想将最接近的 img 的 alt 应用到最接近的 <p> .我试过使用 $(event.target ).closest("p" ).html(imgAlt); ， 没有运气。

更新获取 img alt 不是问题，我只是希望能够将其与多个 div 一起使用。

JQuery

$(document).ready(function() {
    $(".vgQues").mousemove(function() {
        var imgAlt = $(event.target).closest("img").prop('alt');
        //Not working
        //$(event.target ).closest("p" ).html(imgAlt);

        $(".vegQuesTitle").text(src);
        $(".vegQuesTitle").show("fade");
        console.log(src);
    });

    $(".vgQues").mouseleave(function() {

        $(".vegQuesTitle").hide("");
        console.log(imgAlt);
    });
});  

HTML

<div class="media menu-media">
    <div class="media-left media-top col-xs-12 vgQues">
        <p class="vegQuesTitle" style="position:top:-10px; left:50px;"></p>

        <img src="img/topping_corn.jpg" alt="Corn">
        <img src="img/redonion.jpg" alt="Red Onions">
        <img src="img/gpep.jpg" alt="Green Peppers">
        <img src="img/topping_jhalpinos.jpg" alt="Chopped Jhalpinos">
        <img src="img/cilan.jpg" alt="Cilantro">
    </div>
</div>

Answer 1

我认为你需要在 img 上使用 mouseenter 事件(因为 alt 的值只有在你悬停图像时才会改变)然后设置内容p 喜欢

$(document).ready(function() {
  $(".vgQues img").mouseenter(function() {
    $(".vegQuesTitle").text(this.alt||'');
    $(".vegQuesTitle").show("fade");
  });

  $(".vgQues").mouseleave(function() {
    $(".vegQuesTitle").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="media menu-media">
  <div class="media-left media-top col-xs-12 vgQues">
    <p class="vegQuesTitle" style="position:top:-10px; left:50px;"></p>

    <img src="img/topping_corn.jpg" alt="Corn">
    <img src="img/redonion.jpg" alt="Red Onions">
    <img src="img/gpep.jpg" alt="Green Peppers">
    <img src="img/topping_jhalpinos.jpg" alt="Chopped Jhalpinos">
    <img src="img/cilan.jpg" alt="Cilantro">
  </div>
</div>