Question

我有3个同一类的div。

<div id="qq1" class="cl">sentence</div>
<div id="qq2" class="cl">sentence</div>
<div id="qq3" class="cl">sentence</div>

我想知道如何编写正确的代码来输入鼠标调用，使用一个函数为3个div（调用cl类）并返回正确的id for change css.for ex：

<script>
$('.cl').live('mouseenter', function() {
    var currentId = $(this).attr('id');
    $('currentId').css("background-color", "#99cc33");
    $('currentId').css("color", "white");
});
$('.cl').live('mouseleave', function() {
    var currentId = $(this).attr('id');
    $('currentId').css("background-color", "white");
    $('currentId').css("color", "#404040");
});
</script>

但是有些错误因为它不起作用

Answer 1

您不能使用currentId变量，而是尝试使用包含字母c，u，r等的字符串，'currentId'。

要使其与该变量一起使用，您需要说$('#' + currentId).css() - 所以如果currentId是'qq1'，那么实际上您会说$('#qq1').css()。

但是您根本不需要ID，因为您只需使用$(this)：

$('.cl').live('mouseenter', function() {
    $(this).css({"background-color" : "#99cc33",
                 "color" : "white"});
});

$('.cl').live('mouseleave', function() {
    $(this).css("background-color", "white");
    $(this).css("color", "#404040");
});

在jQuery事件处理程序中this引用DOM元素本身，而$(this)为该元素创建一个jQuery对象，以便您可以在其上调用jQuery方法。请注意，.css() method接受多个属性的地图，因此您可以通过一次调用设置所有属性 - 我已在mouseenter但不是mouseleave中显示语法，以便你可以比较。

（注意：与您的问题完全无关，但是如果您使用的是jQuery 1.7+，则应停止使用.live()，因为它已被弃用而不是.on() - 有关于.live() doco page了解如何转换代码。如果您使用的是＆lt; 1.7但是＆gt; 1.4.2，则应使用.delegate()。）

Answer 2

<script>
$('.cl').live('mouseenter', function() {
    var currentId = $(this).attr('id');
    $('#' + currentId).css("background-color", "#99cc33");
    $('#' + currentId).css("color", "white");
});
$('.cl').live('mouseleave', function() {
    var currentId = $(this).attr('id');
    $('#' + currentId).css("background-color", "white");
    $('#' + currentId).css("color", "#404040");
});
</script>

您试图将变量称为文字字符串。请记住使用#id选择器，然后将变量附加到该字符串。

Answer 3

请改为：

<script> 
$('.cl').live('mouseenter', function() { 
    $(this).css("background-color", "#99cc33"); 
    $(this).css("color", "white"); 
}); 
$('.cl').live('mouseleave', function() { 
    var currentId = $(this).attr('id'); 
    $(this).css("background-color", "white"); 
    $(this).css("color", "#404040"); 
}); 
</script>

Answer 4

$(document).ready(function() {
  $('.cl').click(function() {
    var currentId = $(this).attr('id');

    $("#"+currentId).css();
  });
});

这是基本思想，其余只是知识

jquery更改具有相同类的不同ID的css

4 个答案: