Question

我正在尝试将数据属性值输出到一个对话框-具有相同名称，在同一类中并带有单击事件。我试图使用$（this）选择器，但是我意识到我是在同一类中调用的。

<div class="row product_row">
  <div id="pop_up" title="This is The Header" style="display:none;">

  </div>
  <div class="col-md-6 offset-md-2 product_description mr- 
                          auto d-flex align-items-center ">
    <p class="fade" id="description2" data-caption="Second 
                           caption set.">
    </p>
  </div>
  <div class="col-md-2 mr-auto d-flex align-items-center">
    <img class="img-fluid" src="images/oil.png" />
  </div>
</div>


<script>
  $(document).ready(function() {
    $('.product_row').on('click', function() {

      $(function() {
        var text = $(this);
        var text = $('.fade').attr('data-caption');
        $('#pop_up').dialog().html(text);
      });
    });
  });
</script>

Answer 1

您的描述有些混乱。

如果仅打算在同一块中包含data属性的值。解决方法如下：

<div class="row product_row">
  <div class="col-md-6 offset-md-2 product_description mr- 
                          auto d-flex align-items-center ">
    <p class="fade" id="description2" data-caption="Second 
                           caption set.">
    </p>
  </div>
  <div class="col-md-2 mr-auto d-flex align-items-center">
    <img class="img-fluid" src="images/oil.png" />
  </div>
</div>
  <div id="pop_up" title="This is The Header" style="display:none;">

  </div>


<script>
  $(document).ready(function() {
    $('.product_row').on('click', function() {
        var elt = $(this);
        var text = elt.find('.fade').data('caption');
        $('#pop_up').dialog().html(text);
    });
  });
</script>

一些注意事项：
使用data方法而不是attr，因为它使用缓存。

使用jQuery在同一类中显示数据相同的数据属性名称

1 个答案: