Question

我只是JQuery的初学者。如果触发click事件，我有一个简短的JQuery脚本来生成一些淡入淡出效果。一切都运行良好，但如果我想使用具有相同类的多个部分，则click事件会在两个部分中触发效果。所以我想在同一时间只在一个部分中触发click事件。这个问题的解决方案是什么？我应该为每个部分使用多个ID吗？

＆＃13;

    CGSize labelSize=label.frame.size;
    CGSize textSize = [label.text sizeWithFont:label.font constrainedToSize:CGSizeMake(labelSize.width, MAXFLOAT) lineBreakMode:UILineBreakModeWordWrap];
    // Assuming that the text is centered inside the label
    CGFloat topGap = (labelSize.height-textSize.height)/2

＆＃13;

$(document).ready(function(){
        
    $(".button").click(function(){
        $(".big_img").fadeToggle("slow");
        $(".bottom_header").fadeToggle("slow");
        $('.small_img').fadeToggle();
    });
    
    
    $('.button').click(function(e) {
        e.preventDefault;
        if ($(".button").hasClass('button_animate')) {
            $('.button').removeClass('button_animate');
        } else {
            $('.button').removeClass('button_animate');
            $(".button").addClass('button_animate');
        }
    });
    
});

＆＃13;

.client_container {
    position: relative;
    max-width: 300px;
    height: 373px;
    margin-top: 50px;
    background-color: #00ACC1;
    box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2);
    }
    
.button {
    position: absolute;
    right: 20px;
    top: 50px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background-color: #00838F;
    box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2);
    cursor: pointer;
    transition: margin-top .5s ease-in-out;
    }

.button_animate {
    margin-top: 228px;
    }
    
  .big_img {
    position: absolute;
    top: 0px;
    left: 0px;
    }
   
.header{
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 76px;
    background-color: #0097A7;
    }

    p {
        margin: 47px 0 0 15px;
        }

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 73px;
    background-color: #0097A7;
    }
    
    p {
        margin: 10px 0 0 12px;
        }

＆＃13;

Answer 1

您的第二次单击功能可以缩减为jQuery toggleclass，此功能可以直接插入到第一个事件处理程序中。

对于“bottom_header”和“small_img”，片段中没有包含这些类的元素，所以我注释掉了这些行。

所以代码可以是：

    $(".button").click(function(e){
            e.preventDefault;
            $(this).toggleClass('button_animate');
            $(this).prev(".big_img").fadeToggle("slow");
            //$(".bottom_header").fadeToggle("slow");
            //$('.small_img').fadeToggle();
    });

要访问“big_img”，我使用了jQuery prev。

摘录：

$(document).ready(function(){
  $(".button").click(function(e){
    e.preventDefault;
    $(this).toggleClass('button_animate');
    $(this).prev(".big_img").fadeToggle("slow");
    //$(".bottom_header").fadeToggle("slow");
    //$('.small_img').fadeToggle();
  });
});

.client_container {
  position: relative;
  max-width: 300px;
  height: 373px;
  margin-top: 50px;
  background-color: #00ACC1;
  box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2);
}

.button {
  position: absolute;
  right: 20px;
  top: 50px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background-color: #00838F;
  box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2);
  cursor: pointer;
  transition: margin-top .5s ease-in-out;
}

.button_animate {
  margin-top: 228px;
}

.big_img {
  position: absolute;
  top: 0px;
  left: 0px;
}

.header{
  position: absolute;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 76px;
  background-color: #0097A7;
}

p {
  margin: 47px 0 0 15px;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 73px;
  background-color: #0097A7;
}

p {
  margin: 10px 0 0 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="client_container">
    <div class="header"></div>
    <div class="footer"></div>
    <img class="big_img" src="http://lorempixel.com/output/people-q-c-300-300-7.jpg">
    <div class="button button_animate"></div>
</div>

<div class="client_container">
    <div class="header"></div>
    <div class="footer"></div>
    <img class="big_img" src="http://lorempixel.com/output/people-q-c-300-300-7.jpg">
    <div class="button button_animate"></div>
</div>

Answer 2

在jQuery $(this)中引用了触发事件处理程序的元素，因此您可以使用它来选择与使用.closest()和{{1}等函数相关的其他元素相关的元素}。您还可以将两个单独的单击处理函数合并为一个。

＆＃13;

.find()

＆＃13;

$(document).ready(function() {
  $(".button").click(function(e) {
    e.preventDefault;
    $(this).closest('.client_container').find(".big_img").fadeToggle("slow");
    $(this).closest('.client_container').find(".bottom_header").fadeToggle("slow");
    $(this).closest('.client_container').find('.small_img').fadeToggle();
    if ($(this).hasClass('button_animate')) {
      $(this).removeClass('button_animate');
    } else {
      $(this).removeClass('button_animate');
      $(this).addClass('button_animate');
    }
  });
});

＆＃13;

.client_container {
  position: relative;
  max-width: 300px;
  height: 373px;
  margin-top: 50px;
  background-color: #00ACC1;
  box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2);
}
.button {
  position: absolute;
  right: 20px;
  top: 50px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background-color: #00838F;
  box-shadow: 5px 5px 4px 0px rgba(35, 31, 32, 0.2);
  cursor: pointer;
  transition: margin-top .5s ease-in-out;
}
.button_animate {
  margin-top: 228px;
}
.big_img {
  position: absolute;
  top: 0px;
  left: 0px;
}
.header {
  position: absolute;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 76px;
  background-color: #0097A7;
}
p {
  margin: 47px 0 0 15px;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 73px;
  background-color: #0097A7;
}
p {
  margin: 10px 0 0 12px;
}

＆＃13;

请务必结帐https://learn.jquery.com/

Answer 3

更改第二张图片的类名是有意义的，只需复制该类，然后将额外的数字或字母添加到第二个类名称

JQuery单击事件，具有多个具有相同类的div

3 个答案: