时间戳

首页 > 解决方案 > 我只能得到一个属性的值

javascript - 我只能得到一个属性的值

问题描述

我有这个代码，当鼠标经过时我想要它，当它通过时它image 01需要date-idof 。但是由于某种原因，我通过鼠标传递的图像并不重要，它只需要Image 01Image 02date-idImage 02date-idimage 01

jQuery(document).ready(function() {
  var me = jQuery(this);


  jQuery(".post-thumb").on("mouseover", function() {
    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: 20px;">
      <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: 20px;">
      <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>

标签： javascriptjquery

解决方案

由于您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>

推荐阅读