Question

我可以说10个div元素。在这10个div中，我有5个具有某个类的div，然后将它复制为5个（因此它计为10个），

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

获取当前的Elements className并将样式应用于所有元素。见下面的演示，

解决方案1：（宽限匹配意味着包含匹配className的元素）

$('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： 严格匹配（多个类时需要精确的className匹配）

$('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>

Answer 2

http://jsfiddle.net/fhhjaL3n/2/

$('div').mouseover(function(){
    $("."+$(this)[0].classList[0]).css("background","red");
}).mouseout(function(){
   $("."+$(this)[0].classList[0]).css("background","none");
});

注意，如果向div添加更多类，这将不起作用。它将与您当前的代码一起使用，因此请尝试使用它。

Answer 3

仅当className完全相同时才有效：

$(getElementsyByClassName(this.className);

不惜一切代价避免缓慢的jQuery选择器。

你甚至可以完全避免使用jQuery（这很酷）：

var matchedEl = document.getElementsByClassName(this.className);
for (var i = 0, count = matchedEl.length; i < count; i++) {
    matchedEl[i].style.backgroundColor = 'red';
}

Thanx到Vega指出它，总是很高兴没有jQuery生活：）

Answer 4

最干净的方法：你不应该用jquery来操纵css。因为jquery使用样式attr自动设置css，它的特异性为1000。 http://jsbin.com/hawenadefo/2/edit?html,css,js,output

jQuery事件查找具有相同类$（this）的元素

4 个答案: