Переменные и JQuery: как захватить значение (часть 1)

Question

Я должен захватить значение в списке <ul><li>.

Я делаю так:

function capture(){

    $('#country_list li a').mouseover(function(a){
    $(this).addClass('selected');
    var $regionMap = '#'+ $(this).attr('id');
    alert($regionMap); // control
    });

    $('#country_list li a').mouseout(function(){
    $(this).removeClass('selected');

    }); 
}

и selected Класс CSS это

.selected 
    {
     background-color: #FFFFFF;
    }

Функция в порядке, и я активирую в HTML функцию с помощью:

<ul id="country_list" style="list-style-type:none" onmouseover="capture();">

Я не уверен, что это правильно.У вас есть какая-нибудь помощь для меня?

Я разместил второй вопрос, более важный, связанный с этим, и его имя:

переменные и jquery: как собирать значения и использовать их (часть 2)

Answer 1

Звучит отлично, просто вы можете заменить манипуляции с CSS на CSS вроде

#country_list li a:hover {
   background-color: #FFFFFF;
}

Answer 2

Я бы избегал использования атрибута 'onmouseover', и вместо этого применял бы непосредственно слушатель событий с JS, это обеспечит более чистый HTML, а JS будет полностью отделен от HTML.

HTML

<ul id="country_list">

CSS

#country_list {
  list-style-type:none;
}

JS

var $country_list = $( '#country_list' );

$country_list.mouseover( function (e) {

    $( e.target ).addClass( 'selected' );

    var $regionMap = '#' + e.target.id;

    alert( $regionMap ); // control

});

$country_list.mouseout( function (e) {

    $( e.target ).removeClass( 'selected' );

});