如何向Javascript添加条件语句(使用元素ID作为条件)？
如何向Javascript添加条件语句(使用元素ID作为条件)？
提问于 2011-04-29 13:10:19
我再一次向StackOverflow的优秀用户提出另一个基本问题。我刚接触客户端编程，虽然这是我知道的其他语言中的一个相当基本的示例，但我不确定在这里这样做的正确语法(如果它已经实现了)。
这是我当前的代码。该页面供参考，可在http://paysonfirstassembly.com/上找到。但是，我还没有上传最新的版本，下面的功能在生产服务器上还不存在。
$(function () {
var $subnavContainer = $(".subwrapperBlue");
$(".navElements").click(function () {
$subnavContainer.show("slow");
});这是我最近更新的代码。单击后，div将不会再次出现，但会弹出警告框。
var $subnavContainer = $(".subwrapperBlue");
$(function () {
$(".navElements").click(function () {
switch ($(this).index()) {
case 0:
$subnavContainer.html("some html");
break;
case 1:
$subnavContainer.html("some more html");
break;
case 2:
$subnavContainer.html("some other html");
break;
case 3:
$subnavContainer.html("the final html");
break;
}
$subnavContainer.show("slow");
alert("this works");
});回答 5
Stack Overflow用户
回答已采纳
发布于 2011-04-29 13:15:09
您可以检查元素的索引。它以0作为第一个，1作为第二个，依此类推：
if ($(this).index() == 0) {
$subnavContainer.html("some html");
}$(this)指的是被点击的元素。
与其使用长的if {} else if {} ...链，为什么不使用switch呢？它要整洁得多，因为您可以内联break;
switch ($(this).index()) {
case 0:
$subnavContainer.html("some html");
break;
case 1:
$subnavContainer.html("some more html");
break;
...
}Stack Overflow用户
发布于 2011-04-29 13:14:43
$(function () {
var $subnavContainer = $(".subwrapperBlue");
$(".navElements").click(function (e) {
if (e.target.id == 'firstElement')
{
$subnavContainer.html("some html");
}
else if (e.target.id == 'secondElement')
{
$subnavContainer.html("some other html");
}
$subnavContainer.show("slow");
});
});Stack Overflow用户
发布于 2011-04-29 13:14:35
$(function () {
var $subnavContainer = $(".subwrapperBlue");
$(".navElements").click(function (event) { <-- CHANGED
var el = event.target;
if (el.id == #firstElement)
{
$subnavContainer.html("some html");
}
else if (el.id == #secondElement)
{
$subnavContainer.html("some other html");
}
$subnavContainer.show("slow");
});这是为了让您可以访问event.target
或者，使用$(this)测试您单击的元素。这在某种程度上取决于你从什么开始。
$(function () {
var $subnavContainer = $(".subwrapperBlue");
$(".navElements").click(function () {
if ($(this).attr('id') == #firstElement)
{
$subnavContainer.html("some html");
}
else if ($(this).attr('id') == #secondElement)
{
$subnavContainer.html("some other html");
}
$subnavContainer.show("slow");
});
$(function () {
var $subnavContainer = $(".subwrapperBlue");
$(".navElements").click(function () {
if ($(this).index() == 0)
{
$subnavContainer.html("some html");
}
else if ($(this).index() == 1) // zero based indexing
{
$subnavContainer.html("some other html");
}
$subnavContainer.show("slow");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5828143
复制相关文章
相似问题
腾讯云开发者
