Question

<button type="button" class="add-to-cart"><i class="material-icons">add_shopping_cart</i>cumpara</button>
                <button class="added add-to-cart"><i class="material-icons check">check</i><i class="material-icons clear">clear</i>Adaugat in cos</button>

这个CSS代码有两个按钮：

.add-to-cart
{
    position: relative;
    overflow: hidden;
    line-height: em(48);
    background: complement($rodie);
    border: none;
    color: $gray-100;
    text-transform: uppercase;
    height: em(48);
    width: 100%;
    font-size: em(18);
    display: inline-block;
    transition: all 250ms ease-out;
    &.clicked
    {
        transform: translateX(-100%);
    }
    &:hover
    {
        background: complement(darken($rodie, 10%));
    }
    i
    {
        position: absolute;
        right: 0;
        top: 0;
        font-size: em(18);
        height: em(48);
        width: em(48);
        line-height: em(44);
    }
}

.added
{
    position: absolute;
    right: -100%;
    top: 90%;
    z-index: 22;
    background: $verde-jungla;
    &:hover
    {
        background: $verde-jungla;
    }
    &.clicked
    {
        transform: translateX(-100%);
    }
    .check
    {
        left: 0;
    }
}

.clear
{
    transition: all 100ms ease-in-out;
    height: em(48);
    width: em(48);
    right: 0;
    background: desaturate(red, 30%);
    &:hover
    {
        background: desaturate(darken(red, 10%), 30%);
    }
}

我希望按钮通过转换第二个按钮来响应点击事件，第二个按钮附有一个图标和一条消息（告知用户产品已添加到购物车中）。第一次过渡有效。当我点击按钮时，另一个按钮应该出现，但是当清除＆＃34;按钮＆＃34; （<i>，类别为clear）被按下，它不起作用。

这是JQuery代码：

$('.add-to-cart').click(function(){
  $('.add-to-cart').addClass("clicked");
});

$('.clear').click(function(){
event.preventDefault();
  $('.add-to-cart').removeClass("clicked");
});

请记住，如果我更改了第二次单击事件的选定元素，则该过程可以正常运行。

Answer 1

.clear内置.add-to-cart按钮是问题。点击.clear后，点击.add-to-cart。

您确实添加了event.preventDefault，但您不仅希望阻止默认设置。您还需要防止事件“冒泡”。此外，变量event不存在，您需要将其添加为第一个参数的名称。

尝试：

$('.clear').click(function(event){
  event.stopPropagation();// Stop bubbling up
  event.preventDefault();
  $('.add-to-cart').removeClass("clicked");
});

但更好的解决方案是将.clear移到具有.add-to-car的按钮之外。

Answer 2

   <button type="button" class="add-to-cart"><i class="material-icons">add_shopping_cart</i>cumpara</button>
   <button class="added add-to-cart"><i class="material-icons check">check</i><i class="material-icons clear" style=" padding: 0 10px;">clear</i>Adaugat in cos</button>




 $('.add-to-cart').click(function(){
   $('.add-to-cart').addClass("clicked");
 });

 $('.clear').click(function(event){
   event.stopPropagation();
   event.preventDefault();
   $('.add-to-cart').removeClass("clicked");
 });

JQuery click事件与<i>元素无法正常工作

2 个答案: