[英]what's the meaning of the functions in javascript?
function ExChgClsName(Obj,NameA,NameB){
var Obj=document.getElementById(Obj)?document.getElementById(Obj):Obj;
Obj.className=Obj.className==NameA?NameB:NameA;
}
<a href="javascript:showMenu(2);">
i am a newbie of the js. 我是js的新手。 so can't understand the above two function very well.
因此无法很好地理解以上两个功能。 expect someone can explain the line's meaning to me one by one.
希望有人可以一一向我解释这句话的意思。 many thanks.
非常感谢。
For the first function 对于第一个功能
var Obj=document.getElementById(Obj)?document.getElementById(Obj):Obj;
The first line gets the object by its ID if Obj
is a string that is the ID of a DOM element. 如果
Obj
是一个字符串,它是DOM元素的ID,则第一行通过其ID获取对象。 Otherwise it leaves the value of Obj
alone. 否则,它会独自留下
Obj
的值。 This is using the "ternary conditional" operator, a? b: c
这是使用“三进制条件”运算符
a? b: c
a? b: c
. a? b: c
。 which as a value of b
if a
is truthy and c
otherwise. 如果
a
为真,则为b
的值,否则为c
。 Doing this allows the function to accept a string or a DOM element. 这样做允许函数接受字符串或DOM元素。
Obj.className=Obj.className==NameA?NameB:NameA;
The next line sets the CSS class of the DOM element from the last line to NameB
if the CSS class of the DOM element is NameA
and otherwise sets it to NameA
. 下一行设置CSS类从最后一行的DOM元素的
NameB
如果CSS类的DOM元素是NameA
否则将其设置为NameA
。 This would have the effect of swapping out the classes so long as another class is never assigned to the element. 只要从未将另一个类分配给该元素,这将具有换出这些类的效果。 If another class is assigned to the element, then it will start the cycle again with
NameA
. 如果另一个类被分配给该元素,那么它会再次开始循环
NameA
。
function showMenu(iNo){
ExChgClsName("Menu_"+iNo,"MenuBox","MenuBox2");
}
The second function just applies the first to swap the CSS class of the the DOM element with ID of "Menu_"+iNo
between "MenuBox" and "MenuBox2". 第二个函数仅应用第一个函数,
"Menu_"+iNo
在“ MenuBox”和“ MenuBox2”之间交换ID为"Menu_"+iNo
的DOM元素的CSS类。
Personally, I don't like the first line of the first function because it does two searches of the DOM when it only needs to do one. 我个人不喜欢第一个函数的第一行,因为当它只需要执行一次时,它将对DOM进行两次搜索。 I would do this
我会这样做
var Obj = document.getElementById(Obj) || Obj;
That should be more efficient on all implementations and is surely more readable. 这在所有实现上都应该更有效,并且更容易理解。 It uses the
||
它使用
||
operator as a guard to assign Obj
back to itself if only if document.getElementById
returns null
. 仅当
document.getElementById
返回null
运算符才能作为将Obj
分配回自身的保护。
Exchange the cascading style sheet class name on an object from A to B 将对象上的级联样式表类名称从A交换为B
Find the element 查找元素
if the object's css class name is nameA, set it to nameB, otherwise, set it to nameA 如果对象的CSS类名称是nameA,则将其设置为nameB,否则,将其设置为nameA
function ExChgClsName(Obj,NameA,NameB){
//ternary operator, sets Obj = the dom object with id = 1st agrument if it exists
//you can get away with this because an object is "truthy" in javascript
// truthy meaning that if you try to evaluate it as a boolean it is the same as true
// if nothing is found getElementById returns null wich is the same as false
var Obj=document.getElementById(Obj)?document.getElementById(Obj):Obj;
//ternary operator again. changes the class of the dom object to the 3rd argument
//if its class is already the 2nd argument
//otherwise it changes it to the second argument
Obj.className=Obj.className==NameA?NameB:NameA;
}
function showMenu(iNo){
//calls exChgCLsName with the specified arguments
ExChgClsName("Menu_"+iNo,"MenuBox","MenuBox2");
}
// Runs the showMenu function when clicked
<a href="javascript:showMenu(2);">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.