将CSS类作为参数传递给JavaScript函数

Question

将CSS类作为参数传递给JavaScript函数

3

这里的目标是在点击1.gif时，所有具有.panel1类的元素消失（style.display.none），所有具有.panel2类的元素变为可见（style.display.inline）。

我对此还不熟悉...所以我认为这只是' '或者" "的语法问题。

<!DOCTYPE html>

<html>

<head>
    <title>main</title>
    <meta charset="utf-8">

    <style type="text/css">
    .panel1 {display:inline;}
    .panel2 {display:none;}
    </style>

    <script type="text/javascript">
    function panelTransition(panelOut,panelIn)
        {
        document.getElementByClass(panelIn).style.display="inline";
        document.getElementByClass(panelOut).style.display="none";
        }
    </script>
</head>

<body>
<img class="panel1" src=1.gif onclick="panelTransition(panel1,panel2)" />
<img class="panel2" src=2.gif />
</body>

</html>

- 3z33etm

我希望你不介意问我这个问题：你使用的是基本的HTML5标准，而没有使用jQuery吗？=）为什么呢？=） - benqus

3个回答

0

<html>

<head>
    <title>main</title>
    <meta charset="utf-8">

    <style type="text/css">
    .panel1 {display:inline;}
    .panel2 {display:none;}
    </style>

    <script type="text/javascript">
    function panelTransition(panelOut,panelIn)
                {
                    // panelIn gets turned on
                    setDisplay(panelIn,"inline");

                    // panelOut gets turned off
                    setDisplay(panelOut,"none");
                }

                function setDisplay(className,displayState)
                {
                    // retrieve a list of all the matching elements
                    var list = document.getElementsByClassName(className);

                    // step through the list
                    for(i=0; i<list.length; i++) {
                        // for each element, set the display property
                        list[i].style.display = displayState;
                    }                        
                }
    </script>
</head>

<body>
<img class="panel1" src="1.gif" onclick="panelTransition('panel1','panel2')" />
<img class="panel2" src="2.gif" onclick="panelTransition('panel2','panel1')" />
</body>

</html>

或者你可以用jQuery来实现相同的功能。

// fires when the page is up and running
$(document).ready(function(){

     // find all the panel1 elements, 
     // attach an on click handler
     $(".panel1").bind("click", function(){ 

            // find all the panel1 elements
            // set their css display property to inline
            $(".panel1").css("display","inline"); 

            // find all the panel2 elements
            // set their css display property to none
            $(".panel2").css("display","none");
     });

     $(".panel2").bind("click", function(){ 
            $(".panel2").css("display","inline"); 
            $(".panel1").css("display","none");
     });
});

你可以在这里学习关于jQuery的所有内容：http://www.jquery.com/

一旦你点击panel1图片，所有的panel2图片都会消失，你将无法再次点击它们。

- web_bod

在这个阶段，我认为他最好先学习基本的编程概念，然后再深入研究jQuery... - voithos

不，这很有帮助。我只学了几天，已经明显感觉到我会最终使用jQuery。 - 3z33etm

0

<img class="panel1" src=1.gif onclick="panelTransition('panel1','panel2')" />

我认为你需要在那里加引号

- Isaac Fife

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- voithos · Accepted Answer

没有 getElementByClass。应该使用 getElementsByClassName，它会返回一个数组，所以你需要修改代码来遍历这些元素。

function panelTransition(panelOut, panelIn) {
    var inPanels = document.getElementsByClassName(panelIn);
    for (var i = 0; i < inPanels.length; i++) {
        inPanels[i].style.display = 'inline';
    }

    var outPanels = document.getElementsByClassName(panelOut);
    for (var i = 0; i < outPanels.length; i++) {
        outPanels[i].style.display = 'none';
    }
}

如果您使用JavaScript库，如jQuery，则此操作将更加容易。另外，正如已经提到的那样，您需要在

 panelTransition 参数周围添加引号。
<img class="panel1" src=1.gif onclick="panelTransition('panel1', 'panel2')" />
<img class="panel2" src=2.gif />