Question

当我点击产品时，我需要添加一个类:focus，因此在加载下一页之前，您可以看到一个蓝色矩形。

我已添加了一个jQuery来执行此操作，因此当您单击某个产品时，它会更改该类，并添加一个带有框阴影的新类。

但它仅适用于桌面而非移动设备。

＆＃13;

$(document).ready(function() {
  $('div.product-container').on('click', function() {
    $(this).addClass('aftertap');
  });
});

＆＃13;

.aftertap {
  -webkit-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
  -moz-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
  box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
}

＆＃13;

<div class="product-container style1 clearfix" itemscope="" itemtype="http://schema.org/Product">
  <div class="left-block">

    <div class="product-image-container">

      <a class="product_img_link" href="http://localhost/prestawebserver/forward/102-cropped-leggings-performance-cotton.html" title="Cropped Leggings - Performance Cotton" itemprop="url">
        <img class=" img-responsive" src="http://localhost/prestawebserver/1065-home_default/cropped-leggings-performance-cotton.jpg" alt="cropped-leggings-performance-cotton" title="cropped-leggings-performance-cotton" itemprop="image">
      </a>
    </div>
  </div>

＆＃13;

Answer 1

试试这个。而不是div的{{1}}事件，请在锚点击事件中执行。

＆＃13;

click

＆＃13;

$(document).ready(function() {
  $('a.product_img_link').on('click', function() {
    $(this).parents('div.product-container').addClass('aftertap');
  });
});

＆＃13;

.aftertap {
  -webkit-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
  -moz-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
  box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important;
}

＆＃13;

Answer 2

您可以尝试使用setTimeout模拟假延迟，然后转到下一页（您可以根据需要校准延迟，在样本中为800毫秒）

$('div.product-container').on('click', function(){
    $(this).addClass('aftertap');
    setTimeout(function(){
         $(this).closest('a').click();
      },800);
});

Here a working jsfiddle

为什么jQuery只在加载停止时加载？

2 个答案: