парение jQuery и селектор класса
Исключение нулевого указателя - это индикатор того, что вы используете объект, не инициализируя его.
Например, ниже - класс ученика, который будет использовать его в нашем коде.
public class Student {
private int id;
public int getId() {
return this.id;
}
public setId(int newId) {
this.id = newId;
}
}
Приведенный ниже код дает вам исключение с нулевым указателем.
public class School {
Student obj_Student;
public School() {
try {
obj_Student.getId();
}
catch(Exception e) {
System.out.println("Null Pointer ");
}
}
}
Поскольку вы используете Obj_Student, но вы забыли инициализировать его, как в правильном коде, показанном ниже:
public class School {
Student obj_Student;
public School() {
try {
obj_Student = new Student();
obj_Student.setId(12);
obj_Student.getId();
}
catch(Exception e) {
System.out.println("Null Pointer ");
}
}
}
9 ответов
Ваш код выглядит хорошо мне.
Удостоверяются, что DOM готов, прежде чем Ваш JavaScript будет выполнен при помощи $ jQuery (обратный вызов) функция:
$(function() {
$('.menuItem').hover( function(){
$(this).css('background-color', '#F00');
},
function(){
$(this).css('background-color', '#000');
});
});
Я предложил бы не использовать JavaScript для этого вида простого взаимодействия. CSS способен к выполнению его (даже в Internet Explorer 6), и это будет намного более быстро реагирующим, чем выполнение его с JavaScript.
можно использовать ": толпитесь" псевдокласс CSS, но чтобы заставить его работать с Internet Explorer 6, необходимо использовать его на "a" элементе.
.menuItem
{
display: inline;
background-color: #000;
/* width and height should not work on inline elements */
/* if this works, your browser is doing the rendering */
/* in quirks mode which will not be compatible with */
/* other browsers - but this will not work on touch mobile devices like android */
}
.menuItem a:hover
{
background-color:#F00;
}
Это может быть достигнуто в CSS с помощью: псевдокласс при наведении курсора. (: парение не работает над <div> с в IE6)
HTML:
<div id="menu">
<a class="menuItem" href=#>Bla</a>
<a class="menuItem" href=#>Bla</a>
<a class="menuItem" href=#>Bla</a>
</div>
CSS:
.menuItem{
height:30px;
width:100px;
background-color:#000;
}
.menuItem:hover {
background-color:#F00;
}
test.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jQuery Test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="menu">
<div class="menuItem"><a href=#>Bla</a></div>
<div class="menuItem"><a href=#>Bla</a></div>
<div class="menuItem"><a href=#>Bla</a></div>
</div>
</body>
</html>
Работы test.css
.menuItem
{
display: inline;
height: 30px;
width: 100px;
background-color: #000;
}
test.js
$( function(){
$('.menuItem').hover( function(){
$(this).css('background-color', '#F00');
},
function(){
$(this).css('background-color', '#000');
});
});
:-)
Так как это - меню, могло бы также взять его к следующему уровню, и очистить HTML и сделать его более семантическим при помощи элемента списка:
HTML:
<ul id="menu">
<li><a href="#">Bla</a></li>
<li><a href="#">Bla</a></li>
<li><a href="#">Bla</a></li>
</ul>
CSS:
#menu {
margin: 0;
}
#menu li {
float: left;
list-style: none;
margin: 0;
}
#menu li a {
display: block;
line-height:30px;
width:100px;
background-color:#000;
}
#menu li a:hover {
background-color:#F00;
}
На стороне отмечают, что это более эффективно:
$(".menuItem").hover(function(){
this.style.backgroundColor = "#F00";
}, function() {
this.style.backgroundColor = "#000";
});
Я предпочитаю ответ foxy, потому что мы никогда не должны использовать JavaScript, когда существующий css, свойства сделаны для задания.
не забывают добавлять display: block ; в .menuItem, таким образом, высота и ширина приняты во внимание.
редактирование: для лучше script/look& чувствуйте разъединение, если бы когда-нибудь необходимо изменять стиль через jQuery, я определил бы дополнительный css класс и использование $(...).addClass("myclass") и $(...).removeClass("myclass")
Я просто кодировал пример в jQuery о том, как создать оверлейные программы отделения по переключателям для создания компактного, интерактивного, но простого плагина выбора цвета для jQuery
http://blarnee.com/wp/jquery-colour-selector-plug-in-with-support-for-graceful-degradation/
Всегда делайте все просто и легко, создав class
.bcolor{ background:#F00; }
THEN USE THE addClass() & removeClass() to finish it up
.