jquery изменить CSS для разных идентификаторов с тем же классом

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 делений (вызова класса cl) и возврата правильного идентификатора для изменения css.for, например:

<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().

Однако идентификатор вам вообще не нужен, потому что вы можете просто использовать $(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() принимает карту нескольких свойств, поэтому вы можете установить их все одним вызовом - я показал этот синтаксис в mouseenter, но не в mouseleave, чтобы вы моглиможете сравнить.

(Примечание: не имеет никакого отношения к вашему вопросу, но если вы используете jQuery 1.7+, вам следует прекратить использовать .live(), поскольку он устарел в пользу .on() - на странице .live() doco есть инструкции о том, как конвертировать код. Если вы используете <1.7, но> 1.4.2, вам следует использовать .delegate().)

Answer 2

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

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

это основная идея, остальное - просто знание

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

<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, а затем добавить свою переменную к этой строке.