我试图在单击导航中的一个按钮后将类附加到div。
$navButtons.on('click', navigationClick);
// liseten to the navigation and add a class to the link that was selected
var $navButtons = $('nav a');
var $currentListItem = $('nav li')
function navigationClick(){
console.log("click");
// if there is a class to remove, remove it
// currentListItem.children('div').removeClass("nav-selected");
var index = $navButtons.index(this);
console.log(index);
$currentListItem = $currentListItem[index];
console.log($currentListItem); = <li>
$currentListItem.children('div').addClass("nav-selected");
}
当我尝试执行此代码时,我收到错误:
无法读取未定义的属性.children。
我不确定为什么它的说法$currentListItem
未定义,因为我检查了它上方的控制台日志,我得知它是li
项目。
答案 0 :(得分:4)
问题在于这一行:
$currentListItem = $currentListItem[index];
在这里,您通过索引访问jQuery对象,该对象返回Element对象,而不是jQuery对象。反过来,Elements没有children()
方法,因此您看到错误。
要解决此问题,请调用eq()
代替按索引获取jQuery集合中的元素:
$navButtons.on('click', navigationClick);
var $navButtons = $('nav a');
var $currentListItem = $('nav li')
function navigationClick() {
var index = $navButtons.index(this);
$currentListItem = $currentListItem.eq(index); // note .eq() here
$currentListItem.children('div').addClass("nav-selected");
}