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

我认为您需要使用mouseenter事件（因为alt的值仅在您悬停图片时更改img，然后设置p的内容像

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

绑定mouseenter上的img并使用closest()获取vgQues并在其中找到vegQuesTitle（因为vgQues可以是多个vegQuesTitle所以它应该是最接近的一个），比如，

$(document).ready(function() {
  $(".vgQues img").mouseenter(function() {
    var $elem = $(this).closest('.vgQues ') // get parent, if multiple para's
                         .find(".vegQuesTitle")// find para       
    $elem.text(this.alt) // add img alt
         .show("fade"); // show
  });    
  $(".vgQues").mouseleave(function() {
    $(this).find(".vegQuesTitle") // find para
           .text("").hide(); // empty and hide
  });
});

$(document).ready(function() {
  $(".vgQues img").mouseenter(function() {
    var $elem = $(this).closest('.vgQues ') // get parent, if multiple para's
                         .find(".vegQuesTitle")// find para       
    $elem.text(this.alt) // add img alt
         .show("fade"); // show
  });    
  $(".vgQues").mouseleave(function() {
    $(this).find(".vegQuesTitle") // find para
           .text("").hide(); // empty and hide
  });
});

.media{
height:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media menu-media">
    <div class="media-left media-top col-xs-12 vgQues">
        <p class="vegQuesTitle" style=""></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">
        
    </div>
</div>

<div class="media menu-media">
    <div class="media-left media-top col-xs-12 vgQues">
        <p class="vegQuesTitle" style=""></p>

        <img src="img/topping_jhalpinos.jpg" alt="Chopped Jhalpinos">
        <img src="img/cilan.jpg" alt="Cilantro">
    </div>
</div>

Answer 3

您需要使用<service android:name="com.example.MyGcmListenerService" <<<<<<<<<<<<<<<<<<<<<this android:exported="false" > <intent-filter> <action android:name="com.google.android.c2dm.intent.RECEIVE" /> </intent-filter> </service> <service android:name="com.example.MyInstanceIDListenerService" <<<<<<<<<<<<<<<<<<<<<this android:exported="false"> <intent-filter> <action android:name="com.google.android.gms.iid.InstanceID"/> </intent-filter> </service>，因为$(this).find("img").prop('alt')是子节点，而不是img的父节点。 $.fn.closest()遍历DOM树中的祖先。

但我觉得你需要

vgQues

Answer 4

检查Jquery中的attr函数

试试这个

var imgAlt =  $(event.target ).closest("img" ).attr('alt');

让我知道它是否有用

JQuery：将最接近的img alt应用于最近的段落

4 个答案: