js代码写完为什么点击没有效果求解-慕课网

js代码写完为什么点击没有效果求解

来源：3-1 简单翻转控制

Freen247

2017-03-27 15:42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>海报画廊</title>
   <style type="text/css">
   *{padding:0;margin:0;}
   body{background-color:#fff;
       color:#555;
       font-family:'Avenir Next','Lantinghei SC';
       font-size: 14px;
       -webkit-font-smoothing:antialiased;
   }


   .photo{
       width:260px;
       height:320px;
       position: absolute;
       z-index: 1;
       box-shadow: 0 0 1px rgba(0,0,0,.01);
   }
   .photo .side{
       width:100%;
       height:100%;
       background: #eee;
       position: absolute;
       top:0;
       right:0;
       padding: 20px;
       box-sizing: border-box;
   }
   .photo .side-front{}
   .photo .side-front .image{
       width: 100%;
       height: 250px;
       line-height: 250px;
       overflow:hidden;
   }
   .photo .side-front .image img{
       widows: 100%;
   }
   .photo .side-front .caption{
       text-align: center;
       font-size: 16px;
       line-height: 50px;
   }
   .photo .side-back{
       color:#666;
       font-size:14px;
       line-height: 1.5em;
   }
   .photo_center{
       left:50%;
       top:50%;
       margin:-160px 0 0 -130px;
       z-index: 99;
   }
   .wrap{
       width:100%;
       height: 600px;
       position: absolute;
       top: 50%;
       margin-top: -300px;
       background:#333;
       overflow: hidden;
       -webkit-perspective:8000px;
   }
   .photo-wrap{
       position: absolute;
       width:100%;
       height: 100%;
       -webkit-transform-style:preserve-3d;
       -webkit-transition:all .7s;
   }
   .photo-wrap .side-front{
       -webkit-transform:rotateY(0deg);
   }
   .photo-wrap .side-back{
       -webkit-transform:rotateY(180deg);
   }
   .photo-wrap .side{
       -webkit-backface-visibility:hidden;
   }
   .photo_front .photo-wrap{
       -webkit-transform:rotateY(0deg);

   }
   .photo_back .photo-wrap{
       -webkit-transform:rotateY(180deg);

   }
</style>
</head>
<body oneselectstart="return false;">
   <div>
       <div class="photo photo_center photo_front" onclick="turn(this)">

           <div >
               <div class="side side-front">
                   <p><img src="1 超能陆战队.jpg" style="width:240px;"/></p>
                   <p>超能陆战队</p>
               </div>
               <div class="side side-back">
                   <p>描述信息</p>
               </div>
           </div>
       </div>
   </div>
   <script type="text/javascript">
           function turen (elem){
               var elem.className;
               if(/photo_front/.test(cls)){
                   cls=cls.replace(/photo_front/,'photo_back');
               }
               else{
                   cls=cls.replace(/photo_back/,'photo_front');
               }
               return elem.className=cls;
           }

   </script>
</body>
</html>

写回答关注

3回答

慕侠2155777

2019-01-02 15:40:33

肯定报错 var elem.className; 你获取这个dom的类名但是没给他赋值
而且你点击事件调用的函数名都对不上号，上哪执行去

0 0
阿筝同学

2018-12-29 17:43:39

js 你写的方法不对并且是var elem.className 你写的是相当于声明了这么个变量而不是给他取值，你可以console.log打印一下脚本

0 0
我们的演绎

2017-04-27 09:08:07

1、是turn()不是turen()
2、var cls = elem.className; 不是 var elem.className;

0 0