问JS文件出现在源代码中，但Javascript没有执行吗？
EN

Stack Overflow用户

提问于 2014-12-01 08:41:49

回答 1查看 146关注 0票数 1

我正在添加一个CSS响应，动画手风琴类型的组合到我的WordPress网站。我的JS文件显示在源代码中，但效果仍然不起作用。由于某种原因，javascript没有执行。

这是我的JS (/inc/js/coron.js)

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 *
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

jQuery(document).ready(function($) {

      function(window) {

        'use strict';

        // class helper functions from bonzo https://github.com/ded/bonzo

        function classReg(className) {
          return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
        }

        // classList support for class management
        // altho to be fair, the api sucks because it won't accept 

        multiple classes at once
        var hasClass, addClass, removeClass;

        if ('classList' in document.documentElement) {
          hasClass = function(elem, c) {
            return elem.classList.contains(c);
          };
          addClass = function(elem, c) {
            elem.classList.add(c);
          };
          removeClass = function(elem, c) {
            elem.classList.remove(c);
          };
        } else {
          hasClass = function(elem, c) {
            return classReg(c).test(elem.className);
          };
          addClass = function(elem, c) {
            if (!hasClass(elem, c)) {
              elem.className = elem.className + ' ' + c;
            }
          };
          removeClass = function(elem, c) {
            elem.className = elem.className.replace(classReg(c), ' ');
          };
        }

        function toggleClass(elem, c) {
          var fn = hasClass(elem, c) ? removeClass : addClass;
          fn(elem, c);
        }

        var classie = {
          // full names
          hasClass: hasClass,
          addClass: addClass,
          removeClass: removeClass,
          toggleClass: toggleClass,
          // short names
          has: hasClass,
          add: addClass,
          remove: removeClass,
          toggle: toggleClass
        };

        // transport
        if (typeof define === 'function' && define.amd) {
          // AMD
          define(classie);
        } else {
          // browser global
          window.classie = classie;
        }

      })(window);

    //fake jQuery
    var $ = function(selector) {
      return document.querySelector(selector);
    }
    var accordion = $('.accordion');





    //add event listener to all anchor tags with accordion title class
    accordion.addEventListener("click", function(e) {
      e.stopPropagation();
      e.preventDefault();
      if (e.target && e.target.nodeName == "A") {
        var classes = e.target.className.split(" ");
        if (classes) {
          for (var x = 0; x < classes.length; x++) {
            if (classes[x] == "accordionTitle") {
              var title = e.target;

              //next element sibling needs to be tested in IE8+ for 

              any crashing problems
              var content = e.target.parentNode.nextElementSibling;

              //use classie to then toggle the active class which will 

              then open and close the accordion

              classie.toggle(title, 'accordionTitleActive');
              //this is just here to allow a custom animation to treat 

              the content
              if (classie.has(content, 'accordionItemCollapsed')) {
                if (classie.has(content, 'animateOut')) {
                  classie.remove(content, 'animateOut');
                }
                classie.add(content, 'animateIn');

              } else {
                classie.remove(content, 'animateIn');
                classie.add(content, 'animateOut');
              }
              //remove or add the collapsed state
              classie.toggle(content, 'accordionItemCollapsed');




            }
          }
        }

      }
    });

//My CSS - Accordion Styling
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
 * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: 'Lato';
}
h1 {
  text-align: center;
}
.accordion dl {
  border: 1px solid #ddd;
}
.accordion dl:after {
  content: "";
  display: block;
  height: 1em;
  width: 100%;
  background-color: #2ba659;
}
.accordion dt > a {
  text-align: center;
  font-weight: 700;
  padding: 2em;
  display: block;
  text-decoration: none;
  color: #fff;
  -webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
  background-color: #eee;
  font-size: 1em;
  line-height: 1.5em;
}
.accordion dd > p {
  padding: 1em 2em 1em 2em;
}
.accordion {
  position: relative;
  background-color: #eee;
}
.container20 {
  max-width: 960px;
  margin: 0 auto;
  padding: 2em 0 2em 0;
}
.accordionTitle {
  background-color: #38cc70;
  border-bottom: 1px solid #30bb64;
}
.accordionTitle:before {
  content: "+";
  font-size: 1.5em;
  line-height: 0.5em;
  float: left;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
  background-color: #2ba659;
}
.accordionTitleActive {
  background-color: #2ba659;
}
.accordionTitleActive:before {
  -webkit-transform: rotate(-225deg);
  -moz-transform: rotate(-225deg);
  transform: rotate(-225deg);
}
.accordionItem {
  height: auto;
  overflow: hidden;
}
@media all {
  .accordionItem {
    max-height: 50em;
    -moz-transition: max-height 1s;
    -o-transition: max-height 1s;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
  }
}
@media screen and (min-width: 48em) {
  .accordionItem {
    max-height: 15em;
    -moz-transition: max-height 0.5s;
    -o-transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s;
    transition: max-height 0.5s;
  }
}
.accordionItemCollapsed {
  max-height: 0;
}
.animateIn {
  -webkit-animation-name: accordionIn;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-name: normal;
  -moz-animation-duration: 0.65s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  -webkit-animation-name: accordionIn;
  -webkit-animation-duration: 0.65s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
}
.animateOut {
  -webkit-animation-name: accordionOut;
  -webkit-animation-duration: 0.75s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
  -moz-animation-name: accordionOut;
  -moz-animation-duration: 0.75s;
  -moz-animation-iteration-count: 1;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-fill-mode: both;
  -moz-animation-delay: 0s;
  -webkit-animation-name: accordionOut;
  -webkit-animation-duration: 0.75s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 0s;
}
@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes accordionIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
  100% {
    opacity: 1;
    -moz-transform: scale(1);
  }
}
@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
}
@-moz-keyframes accordionOut {
  0% {
    opacity: 1;
    -moz-transform: scale(1);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(0.8);
  }
}
@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

//And My HTML
<div class="container20">
  <div class="accordion">
    <dl>
      <dt><a class="accordionTitle" href="#">First Accordion heading</a></dt>
      <dd class="accordionItem accordionItemCollapsed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum.
          Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.</p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
          id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
      </dd>
      <dt><a href="#" class="accordionTitle">Second Accordion heading</a></dt>
      <dd class="accordionItem accordionItemCollapsed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum.
          Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.</p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
          id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
      </dd>
      <dt><a href="#" class="accordionTitle">Third Accordion heading</a></dt>
      <dd class="accordionItem accordionItemCollapsed">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum.
          Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris.</p>
        <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget
          id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
      </dd>
    </dl>
  </div>
</div>

这里是在码页上，它在那里工作得很好，但是如果您运行上面的代码片段，您将看到手风琴缺少了代码页上的功能。

这些效果并不适用于我的WordPress站点，或者上面的堆栈溢出片段，尽管我已经将代码复制并粘贴到了JS文件中。由于JS文件显示在我的WordPress站点的源代码中，我不知道为什么它没有执行。

问题是否在于我的JS文件如何落入DOM结构中？我不知道。

html标记是相同的，CSS也是一样(一些微小的变化)。

有人知道和JS在一起的人能帮我吗？

有问题的页

javascript

wordpress

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-12-01 10:37:55

您的javascript没有运行，因为Wordpress与它加载的其他库有兼容性问题。要解决这个问题，您可以看看这个链接。

其背后的想法是，jQuery库包括在WordPress被设置为noConflict()模式。这是为了防止与WordPress可以链接的其他WordPress库的兼容性问题(我直接引用它们)。

在noConflict()模式中，jQuery的全局$快捷方式不可用，因此可以使用：

jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

这只是一个用$代替jQuery的问题。

如果您真的非常想使用您的$，可以将它封装在下面的代码中。

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});