个人中心
gpt4 book ai didi

javascript - addEventListener 给 IE8 带来问题。是否可以将我的 JavaScript 转换为 jQuery？

转载 作者：行者123 更新时间：2023-11-28 08:51:58 24 4
gpt4 key购买 nike

我在我的网站上遇到了 Uncaught TypeError:Cannot call method 'addEventListener' of null 错误，这给我在浏览器之间带来了巨大的麻烦。

我认为问题在于 Chrome 和 IE8 无法识别 addEventListener。

这是我的js代码。

var init = function() {
var box = document.querySelector('.container').children[0],
  showPanelButtons = document.querySelectorAll('#show-buttons button'),
  panelClassName = 'show-front', 

  onButtonClick = function( event ){
    box.removeClassName( panelClassName );
    panelClassName = event.target.className;
    box.addClassName( panelClassName );
  };

for (var i=0, len = showPanelButtons.length; i < len; i++) {
showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
}

document.getElementById('toggle-backface-visibility').addEventListener( 'click',                 function(){
box.toggleClassName('panels-backface-invisible');
 }, false);

};

window.addEventListener( 'DOMContentLoaded', init, false);

我想知道是否有可能(也有多难)将此 js 转换为 jQuery？

**现在包括我的 html(很抱歉它很草率，这是作为一个学校项目开始的)

<html lang="en" class=" js csstransforms3d"><head>
<meta charset="UTF-8">

<!-- disable zooming -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=0">
<meta name="description" content="CooperCreative is a design house based out of Fredericton, New Brunswick. The Goal of CooperCreative is to satisfy customers with beautiful design, incredible dedication to meet all deadlines, and customer service. " />

<meta name="keywords" content="Graphic Design, web design, design, designer, marketting, New Brunswick, Fredericton, business card design, Print advertisement, banner design, flash design, interactive design, logo design, brochure design, newsletter deisgn, packaging design, signage, photo retouching" />
<meta name="language" content="english" />
<title>CooperCreative</title>

<link rel="stylesheet" href="css/style.css" media="screen">

<link href="css/lightbox.css" rel="stylesheet" />

<style type="text/css">
body {
background-image: url(debut_dark_@2X.png);
background-repeat: repeat;
margin: 0;
padding: 0;
}
</style>
<!-- this is the contect google font code -->

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'      type='text/css'>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-43798300-1', 'coopercreative.ca');
ga('send', 'pageview');

</script>
</head>
<body        onLoad="MM_preloadImages('images/homebuttonup.png','images/aboutbuttonup.png','images/services buttonup.png','images/portfoliobuttonup.png','images/resumebuttonup.png','images/contactbuttonup.png')">
<div id="header">
<div id="logo"><img src="images/logo.png" width="425" height="50"></div>

<div id="buttoncontainer">
<section id="options">


<p id="show-buttons">
  <button class="show-front" id="buttonfront"></button>
  <button class="show-back" id="buttonback"></button>
  <button class="show-right" id="buttonright"></button>
  <button class="show-left" id="buttonleft"></button>
  <button class="show-top" id="buttontop"></button>
  <button class="show-bottom" id="buttonbottom"></button>
</p>
</section>

</div>








</div>
<div id="spacer"></div>








<section class="container">
<div id="cube" class=" panels-backface-invisible  show-front">
  <span class="front">
    <div id="frontdiv">
  <img src="images/frontlogo.png" width="600" height="600"></div></span>
  <span class="back">
    <div id="backdiv">
      <div id="boxtitles">About</div>    <div id="innerdiv"></div>


      </div></div>


</span>




  <span class="right"><div id="boxtitles">Services</div>

  <div id="innerdiv">
</div>

  </span>
  <span class="left"><div id="boxtitles">Portfolio</div><div id="innerdiv">
    <div id="innertopleft">

    <a href="port/1.jpg" data-lightbox="print" title="Print Media"><img src="port/printmedia.png" width="203" height="234"></a>



    </div>
  <div id="innertopright"><a href="port/l1.jpg" data-lightbox="logo" title="Logo Design">     <img src="port/logodesign.png" width="169" height="212"></a>


  </div>

  <div id="innerbottomleft"><a href="port/w1.jpg" data-lightbox="web" title="Web Development"><img src="port/webdevelopment.png" width="169" height="212"></a>


  </div>

  <div id="innerbottomright"><a href="port/c1.jpg" data-lightbox="con" title="Web     Development"><img src="port/conceptual.png" width="169" height="212"></a>



  </div>




  </div>

  </span>
  <span class="top"><div id="boxtitles">Contact</div>

   <div id="innerdivcontact">
  <div id="innerdivcontact2">

    </div>

<form id="form2" action="contact-form-handler.php" method="post">   

        <fieldset><legend>Contact form</legend>
            <p class="first">
                <label for="name"><b>Name*</b></label>
                <input type="text" name="name" id="name" size="30" />
            </p>
            <p>
                <label for="email"><b>Email*</b></label>
                <input type="text" name="email" id="email" size="30" />
            </p>

            <p>
                <label for="message"><b>Message</b></label>
                <textarea name="message" id="message" cols="30" rows="10"></textarea>
            </p>                    

            <p class="submit"><button type="submit">Send</button></p>       

        </fieldset>                 

    </form> 

  </div>

  </span>


  <span class="bottom"><div id="boxtitles">Social</div>


  <div id="innerdivthanks">
 </div>


</div>

  </span>




</div>



</section>



</body>
<script src="js/utils.js"></script>
<script src="js/rotate-box.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<script language="JavaScript" src="js/gen_validatorv31.js" type="text/javascript">   </script>
</html>

最佳答案

您可以尝试这个(从给定的普通 JavaScript 代码转换而来，没有 html，未经测试，但希望它能工作)

$(function(){
    $('#show-buttons').on('click', 'button', function(e){
        $('.container').children(':first').removeClass('show-front').addClass($(e.target).attr('class'));
    });

    $('#toggle-backface-visibility').on( 'click', function(){
        $('.container').children(':first').toggleClass('panels-backface-invisible');
    });
});

使用jQuery-1x , 最新(2x) jQuery 不支持 IE-6/7/8。

关于javascript - addEventListener 给 IE8 带来问题。是否可以将我的 JavaScript 转换为 jQuery？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19041121/

24 4 0
文章推荐： css - 如何获取 Sass 或 CSS 中最后分配的属性的值？
文章推荐： ios - pList IOS Swift 中的数据是无序的
文章推荐： css - SCSS 变量 - 同名，不同媒体断点的不同值
文章推荐： javascript - MySQL值不显示在图片名称中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com