javascript - jQuery 事件查找具有相同类 $(this) 的元素

Question

我假设有 10 个 div 元素。在这 10 个 div 中，我有 5 个具有特定类别的 div，然后将其复制为 5 个(因此算作 10 个)，

如果我在某个类上触发事件，那么如何将代码也应用于重复的类？

$('div').mouseover(function(){
    $(this).css("background","red");
}).mouseout(function(){
     $(this).css("background","none");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="text">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
    <div class="text">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
    <div class="text2">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
    <div class="text2">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
    <div class="text3">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
    <div class="text3">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
    <div class="text4">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
    <div class="text4">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>

Answer 1

获取当前元素类名并将样式应用于所有元素。请参阅下面的演示，

解决方案 1:(宽松匹配意味着包含匹配类名的元素)

$('div').mouseover(function() {
  var className = this.className.split(' ');
  $('.' + className.join('.')).css("background", "red");
}).mouseout(function() {
  var className = this.className.split(' ');
  $('.' + className.join('.')).css("background", "none");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
<div class="text">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
<div class="text2">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
<div class="text2">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
<div class="text3">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
<div class="text3">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
<div class="text4">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>
<div class="text4">I can tell that I am being hovered, but I want my identical twin to apply code from it also</div>

解决方案 2: 严格匹配(具有多个类时需要完全匹配类名)

$('div').mouseover(function () {
    var _this = this;
    var className = this.className.split(' ');
    $('.' + className.join('.')).filter(function () {
        return this.className === _this.className;
    }).css("background", "red");
}).mouseout(function () {
    var _this = this;
    var className = this.className.split(' ');
    $('.' + className.join('.')).filter(function () {
        return this.className === _this.className;
    }).css("background", "none");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text4 text2">I can tell that I am being hovered, but I want some elements with same class as me to apply the code also.</div>
<div class="text4">I can tell that I am being hovered, but I want some elements with same class as me to apply the code also.</div>
<div class="text4 text2">I can tell that I am being hovered, but I want some elements with same class as me to apply the code also.</div>
<div class="text4">I can tell that I am being hovered, but I want some elements with same class as me to apply the code also.</div>