Question

我有这段代码，当鼠标移至image 01时，它需要date-id的{{1}}，而当它经过Image 01时，它需要{ Image 02中的{1}}。但是由于某些原因，我通过鼠标的图像并不重要，它只占用date-id中的Image 02

date-id

image 01

Answer 1

由于您在事件（me）处理函数的外部声明了mouseover，因此在事件触发时它没有改变。在事件处理函数中声明me：

jQuery(document).ready(function() {
  jQuery(".post-thumb").on("mouseover", function() {
    var me = jQuery(this);
    var data_id2 = jQuery('img', me).attr("data-id");
    console.log(data_id2);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row list-group">
  <div class="item large-3 medium-6 columns end group-item-grid-default">
    <div class="post thumb-border" style="height: 277px;">
      <div class="post-thumb">
        <img src="image01.jpg" alt="Image 01" data-id="000001">
      </div>
      <!--post-thumb-->
    </div>
    <!--post thumb-border-->
  </div>
  <!--item-->
  <div class="item large-3 medium-6 columns end group-item-grid-default">
    <div class="post thumb-border" style="height: 277px;">
      <div class="post-thumb">
        <img src="image02.jpg" alt="Image 02" data-id="000002">
      </div>
      <!--post-thumb-->
    </div>
    <!--post thumb-border-->
  </div>
  <!--item-->
</div>
<!--item-->
</div>

Answer 2

您需要找到当前悬停的项目中的img。您可以执行$(this).find('img')。

jQuery(document).ready(function() {


  jQuery(".post-thumb").on("mouseover", function() {
    var data_id2 = jQuery(this).find('img').attr("data-id");
    console.log(data_id2);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row list-group">
  <div class="item large-3 medium-6 columns end group-item-grid-default">
    <div class="post thumb-border" style="height: 277px;">
      <div class="post-thumb">

        <img src="image01.jpg" alt="Image 01" data-id="000001">


      </div>
      <!--post-thumb-->
    </div>
    <!--post thumb-border-->
  </div>
  <!--item-->
  <div class="item large-3 medium-6 columns end group-item-grid-default">
    <div class="post thumb-border" style="height: 277px;">
      <div class="post-thumb">

        <img src="image02.jpg" alt="Image 02" data-id="000002">


      </div>
      <!--post-thumb-->
    </div>
    <!--post thumb-border-->
  </div>
  <!--item-->
</div>
<!--item-->
</div>

Answer 3

这是由于this来自文档加载时，它应该来自mouseover事件

jQuery(document).ready(function() {

  jQuery(".post-thumb").on("mouseover", function() {
    var data_id2 = jQuery('img', this).attr("data-id");
    console.log(data_id2);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row list-group">
  <div class="item large-3 medium-6 columns end group-item-grid-default">
    <div class="post thumb-border" style="height: 277px;">
      <div class="post-thumb">

        <img src="image01.jpg" alt="Image 01" data-id="000001">


      </div>
      <!--post-thumb-->
    </div>
    <!--post thumb-border-->
  </div>
  <!--item-->
  <div class="item large-3 medium-6 columns end group-item-grid-default">
    <div class="post thumb-border" style="height: 277px;">
      <div class="post-thumb">

        <img src="image02.jpg" alt="Image 02" data-id="000002">


      </div>
      <!--post-thumb-->
    </div>
    <!--post thumb-border-->
  </div>
  <!--item-->
</div>
<!--item-->
</div>

我只能获得一个属性的值

3 个答案: