Question

如何调用函数CheckColour()执行检查表的“详细信息”？ {“1}}中的if-else语句将在”details“为”M“时将元素的背景颜色返回”blue“，否则返回粉红色（对于”F“）。当我尝试调用我显示的代码中显示的函数时，它将无法正常工作。

JavaScript代码：

CheckColour()

Answer 1

您的功能不是element的方法，因此您不应在element上调用它。而是将element传递给函数。

此外，details是一个DOM元素，因此它不能等于"M"。您可能希望将table[i+2]与"M"进行比较。

你可以这样做：

CheckColour(element, table[i+2]);

function CheckColour(element, details) {
    element.style.backgroundColor = 
        details == "M" ? 'rgba(0,191,255,0)' : 'rgba(255,105,180,0)';
}

这使用ternary operator (? ... :)作为if ... else语句的替代，因为if的两个块都对同一属性执行赋值。

确保将function定义移出循环。它只需要定义一次。

Answer 2

如何提取函数并为其提供适当的变量来执行操作。

function CheckColour(element, details) {
    if(details == "M")
    element.style.backgroundColor = 'rgba(0,191,255,0)';
     else
    element.style.backgroundColor = 'rgba(255,105,180,0)';
  }

//table      
var table = [
"Lyn", "22", "F", 1, 1,
"May", "32", "F", 18, 1,
"Sam", "27", "F", 1, 2,
"Sham", "23", "F", 2, 2,
"Hrs", "22", "M", 13, 2
];

// function calling starts here..

            for ( var i = 0; i < table.length; i += 5 ) {

                var element = document.createElement( 'div' );
                element.className = 'element';

                var number = document.createElement( 'div' );
                number.className = 'number';
                number.textContent = (i/5) + 1;
                element.appendChild( number );

                var symbol = document.createElement( 'div' );
                symbol.className = 'symbol';
                symbol.textContent = table[ i ];
                element.appendChild( symbol );

                var details = document.createElement( 'div' );
                details.className = 'details';
                details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ];
                element.appendChild( details );

                // element.CheckColour(details);  /*help me check this */
                CheckColour(element, details);
                /*CheckColour function, help me check this too if there is any error*/


                var object = new THREE.CSS3DObject( element );
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add( object );

                objects.push( object );

                //

                var object = new THREE.Object3D();
                object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
                object.position.y = - ( table[ i + 4 ] * 180 ) + 990;

                targets.table.push( object );

            }

Javascript条件语句调用

2 个答案: