0

我正在根据我之前的线程实现一个解决方案，它的主要目标是在 Magento 中检查商店是否打开。开了就好了 如果不是，它应该停用“添加到购物车”按钮并将工作时间悬停在文本上。

该解决方案可以：

  1. 通过 AJAX 获取服务器上的当前时间
  2. 使用这个时间检查条件
  3. 根据上述结果，它为按钮元素分配或不分配一个类。

但是，从我的测试中我看到，当我尝试悬停一个具有通过动态添加的类的元素时$(this).addClass('btn-closed');- 它不起作用。如果我尝试通过匹配元素上已经存在的类来悬停，它可以正常工作（但是由于逻辑，它不能作为我的解决方案）。

// funcao para acertar as classes dos botoes aberto fechado
 $j.get('/restaurante/hora', function(data) {
        $j('#now').val(data);
        // Box de Sugestoes
        $j("#products-grid-QD .btn-cart").each( function() {
            //alert($j(this).attr('tipo') + " " +  $j(this).attr('abre1') + " " + $j(this).attr('fecha1') + " " + $j(this).attr('abre2') + " " + $j(this).attr('fecha2') + " " + $j('#now').val())
            if (checkinrange($j(this).attr('tipo'), $j(this).attr('abre1'),$j(this).attr('fecha1'),$j(this).attr('abre2'),$j(this).attr('fecha2'),$j('#now').val())) {
                $j(this).removeClass('btn-fechado');
            } else {
                $j(this).addClass('btn-fechado');
                $j(this).removeAttr('onclick');
                $j(".commentBtn").text('Fechado');

            }

        });
    }); 


    $j(document).ready(function(){
        $j('.btn-fechado').hover(function() {               
           $j(this).next(".commentBtn").animate({opacity: "show"}, "slow");
         }, function() {
           $j(this).next(".commentBtn").animate({opacity: "hide"}, "fast");

         });
    });




<button type="button" onclick="btnComprar(<?php echo $_help['store_id']; ?>, '<?php echo $this->getAddToCartUrl($_product); ?>', '<?php echo $_help['nome'];?>')" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')" tipo="<?php echo $_help['tipo'];?>" abre1="<?php echo $_help['abre1'];?>" fecha1="<?php echo $_help['fecha1'];?>" abre2="<?php echo $_help['abre2'];?>" fecha2="<?php echo $_help['fecha2'];?>" >
                                    <span><span><?php echo $this->__('Add to Cart') ?></span></span>
                                </button>
                                <span class="commentBtn"></span>

请协助。

4

4 回答 4

2

您的代码执行此操作：

  1. 等待 DOM 准备好
  2. 选择所有具有类的元素.btn-fechado
  3. 绑定他们悬停事件。

您应该在分配类时绑定事件，或者对事件使用实时绑定。

分配类时的绑定：

$j(this).addClass('btn-fechado')
  .hover(function() {
    $j(this).next(".commentBtn").animate({opacity: "show"}, "slow");
  }, function() {
    $j(this).next(".commentBtn").animate({opacity: "hide"}, "fast");
  });

使用实时绑定：

$j(document).on("mouseover", '.btn-fechado', function() {               
  $j(this).next(".commentBtn").animate({opacity: "show"}, "slow");
});
$j(document).on("mouseout", '.btn-fechado', function() {
  $j(this).next(".commentBtn").animate({opacity: "hide"}, "fast");
});

您可以更换$j(document)一个较小的容器。

于 2012-11-22T12:47:50.633 回答
0

您可以通过给按钮本身一个 id 来避免这样做，然后使用

$('#yourButton').addClass('yourClass');
$('#yourButton').on('hover', function() {});
于 2012-11-22T12:48:39.137 回答
0

您必须使用委托：

$j(document).on('hover','.btn-fechado',function() {
 ....
}
于 2012-11-22T12:49:29.877 回答
0

hover请尝试jquery live

$j(document).ready(function(){
    $j('.btn-fechado').live('hover',function() {               
       $j(this).next(".commentBtn").animate({opacity: "show"}, "slow");
     }, function() {
       $j(this).next(".commentBtn").animate({opacity: "hide"}, "fast");

     });
});

使用 jquery live 方法，您没有绑定/取消绑定 dom。欲了解更多信息，请访问。

http://api.jquery.com/live/

于 2012-11-22T12:50:10.457 回答