Javascript 单击每个指定类项目的函数

我有一个应该与每个

li

对应的函数。使用纯JavaScript，我想知道如何将

listitem

上的HTML替换为用户输入的任何内容

我只希望单击以运行的函数，并且只希望运行适当的行（在本例中为li）

功能日（el）{
var listitem=document.getElementsByClassName（'listitem'）；
var changebox=document.getElementsByClassName（'changebox'）；
listitem[el].innerHTML=changebox[el].value；
}

ulli{列表样式类型：无；}
.changebox{宽度：40px；}

项目1
编辑


项目1
编辑

以下是我决定实施每日功能的方式

el

不是索引，而是它本身的元素。因此我使用它来查找

parentNode

，它是包含它的

li

标记。然后从那里搜索您为值指定的类的第一个匹配项

功能日（el）{
var parent=el.parentNode；
var listitem=parent.getElementsByClassName（'listitem'）[0]；
var changebox=parent.getElementsByClassName（'changebox'）[0]；
listitem.innerHTML=changebox.value；
}

ulli{列表样式类型：无；}
.changebox{宽度：40px；}

项目1
编辑


项目1
编辑

以下是我决定实施每日功能的方式

el

不是索引，而是它本身的元素。因此我使用它来查找

parentNode

，它是包含它的

li

标记。然后从那里搜索您为值指定的类的第一个匹配项

功能日（el）{
var parent=el.parentNode；
var listitem=parent.getElementsByClassName（'listitem'）[0]；
var changebox=parent.getElementsByClassName（'changebox'）[0]；
listitem.innerHTML=changebox.value；
}

ulli{列表样式类型：无；}
.changebox{宽度：40px；}

项目1
编辑


项目1
编辑

这将替换整个行项目，我不知道您是否希望changebox保持不变，并使用稍微不太详细的queryselector而不是getElementByClassName

功能日（el）{
var parent=el.parentNode；
var changebox=parent.querySelector（'.changebox'）
var listitem=parent.querySelector（'.listitem'）
listitem.innerHTML=“Item”+changebox.value；
}

ulli{列表样式类型：无；}
.changebox{宽度：40px；}

项目1
编辑


项目1
编辑

这将替换整个行项目，我不知道您是否希望changebox保持不变，并使用稍微不太详细的queryselector而不是getElementByClassName

功能日（el）{
var parent=el.parentNode；
var changebox=parent.querySelector（'.changebox'）
var listitem=parent.querySelector（'.listitem'）
listitem.innerHTML=“Item”+changebox.value；
}

ulli{列表样式类型：无；}
.changebox{宽度：40px；}

项目1
编辑


项目1
编辑

混合使用javascript和标记被认为不是一种好的做法。你可以考虑分开它们。 下面是您的示例的工作代码

$（文档）.ready（函数（）{
$（“.listcontainer按钮”）.bind（'单击'，日期）；
});
活动日（活动）{
var targetElement=event.target；
变量$targetObject=$（targetElement）；
var sides=$targetObject.sides（）；
var listitem=同级.filter（'.listitem'）；
var changebox=同级.filter（'.changebox'）；
$（listitem）.html（$（changebox.val（））
}

ulli{
列表样式类型：无；
}
.兑换箱{
宽度：40px；
}

项目1
编辑


项目1
编辑

混合使用javascript和标记被认为不是一种好的做法。你可以考虑分开它们。 下面是您的示例的工作代码

$（文档）.ready（函数（）{
$（“.listcontainer按钮”）.bind（'单击'，日期）；
});
活动日（活动）{
var targetElement=event.target；
变量$targetObject=$（targetElement）；
var sides=$targetObject.sides（）；
var listitem=同级.filter（'.listitem'）；
var changebox=同级.filter（'.changebox'）；
$（listitem）.html（$（changebox.val（））
}

ulli{
列表样式类型：无；
}
.兑换箱{
宽度：40px；
}

项目1
编辑


项目1
编辑

el

不是你想象的那样

el

不是你想象的那样它被明确提到他想替换

listitem

中的文本。我理解“使用纯JavaScript，我想知道如何将listitem上的HTML替换为用户输入的任何内容。”作为替换所有内容，但只有OP知道：-）平心而论，您可能应该得到最好的答案，但包括我的，只是为了展示一种不同的方法，不需要额外的索引获取者。我现在看到他指的是“listItem”类不是列表项元素…我想我读得太快了。有人明确提到他想替换

listitem

中的文本。我理解“使用纯JavaScript，我想知道如何将listitem上的HTML替换为用户输入的任何内容。”作为替换所有内容，但只有OP知道：-）平心而论，您可能应该得到最好的答案，但包括我的，只是为了展示一种不同的方法，不需要额外的索引获取者。我现在看到他指的是“listItem”类不是列表项元素…我猜我读得太快了。OP说他想要一个普通的javascript解决方案。OP说他想要一个普通的javascript解决方案。