Jquery 硬编码的幻灯片放映可以工作，但在WordPress渲染时会中断

我已经创建了一个jQuery幻灯片，当它被硬编码到JSFIDLE中时可以工作，正如您在这里看到的：但是一旦它被WordPress呈现，就会中断，我不知道为什么。所有的幻灯片都在.postContainer分区中，这是所有工作的关键，所以我不明白为什么它不工作

任何帮助都将不胜感激。我用WordPress提供的代码制作了一个JSFIDLE，并将其包含在这里。以下是JSFIDLE：

HTML:

jQuery：

  $('.slideCount').each(function(){
    var text='1/'+$(this).parents('div.postContainer').find('.slideContainer').length
    $(this).text(text)
    })
  $(".slideshow").height($(".slideContainer").height());    
  $('.nextSlide').show()  
  $('.prevSlide').hide()

    $('div.nextSlide').click(function (e){
    var count=parseInt($(this).siblings('.slideCount').text())
    var slideshow=$(this).parents('div.postContainer').find('.slideshow')
    var slides = $(slideshow).children().length;
    if(count===slides){
      e.preventDefault()
        }else{
      count++
      $(this).parents('div.postContainer').find('div.slideContainer:first').appendTo(slideshow) 
      $(this).siblings('.slideCount').text(count+'/'+slides)
    }
    if(count===slides){$(this).hide()}else{$(this).parent().find('div.prevSlide').show()}
    });

    $('.prevSlide').click(function (e){
    var count=parseInt($(this).siblings('.slideCount').text().slice(0,-2))
    var slideshow=$(this).parents('div.postContainer').find('.slideshow')
    var slides = $(slideshow).children().length;
    if(count===1){e.preventDefault()}else{
      count--
      $(this).parents('div.postContainer').find('div.slideContainer:last').prependTo(slideshow) 
      $(this).siblings('.slideCount').text(count+'/'+slides)
    } 
    if(count===1){$(this).hide()}else{$(this).parent().find('div.nextSlide').show()} 
    });

---

您的.postContainer在html中被设置为断开小提琴的post容器

您需要找出导致冲突的原因。在Chrome或Firefox中，右键单击wordpress页面上的任意位置，选择Inspect元素，然后当它打开select Console选项卡时，重新加载页面，并查看是否显示任何错误。在这里分享。您也可以在其他浏览器上做类似的事情。@自由职业者感谢您的回复。我刚刚检查了Chrome中的控制台-它没有列出任何错误。好的，这很好。wordpress中的幻灯片放映究竟是以何种方式中断的？@freeloper与此JSFIDLE上的方式相同，它包含了我wordpress博客中的渲染代码：因此它渲染所有幻灯片并将它们放置在彼此的顶部-只是处理更改幻灯片的代码不起作用，这让我觉得它与我的HTML有关。我就是找不到错误。两个小提琴上的代码是否100%相同？如果有什么区别，哪怕是很小的区别，也许这就是我们要寻找的地方。

 body {
     background-color: #000;
     font-family:'Source Sans Pro', Arial;
     font-size: 18px;
 }

b, strong {
  font-weight: bold;
}

 .container {
     width: 960px;
     margin: 0 auto;
 }

 header {
     width: 100%;
     height: 135px;
 }

 .logo {
     width: 260px;
     height: 135px;
     float: left;
 }

 nav {
     width: 685px;
     height: 135px;
     padding-left:15px;
     float: left;
 }

 nav ul li {
     float: left;
     line-height: 135px;
     position: relative;
 }

 nav ul li a {
     font-size: 24px;
     color: white;
     background-color: black;
     font-weight: bold;
     margin-right: 20px;
     text-decoration: none;
     text-transform: uppercase;
     display: block;
 }

 nav ul li a:hover {
     text-decoration: underline;
 }

 nav ul ul {
     width: 200px;
     height: 50px;
     position: absolute;
     top: 85px;
     left: 0;
     display: none;
     z-index: 1000;
 }

 nav ul ul li {
     float: none;
     line-height: 50px;
 }

 nav ul ul li a {
     font-weight: regular;
     font-size: 20px;
 }

 nav ul li:hover ul {
     display: block;
 }

 .search {
     width: 260px;
     height: 135px;
     float: left;
 }

 section {
     width: 640px;
     float: left;
 }

 .post-container {
     width: 100%;
     position: relative;
     margin-bottom: 30px;
 }

 .post-image img {
     max-width: 100%;
     z-index: 1;
 }

 .post-content {
     position: relative;
     left: 30px;
     width: 580px;
     z-index: 2;
 }

 .thumbnail-positioning {
     bottom: 110px;
     margin-bottom: -110px;
 }

 .post-content p {
     line-height: 22px;
     margin-bottom: 15px;
 }

 .post-content img {
     max-width: 100%;
 }
 .post-meta h3 {
     text-transform: uppercase;
     font-size: 12px;
     color: white;
     margin-bottom: 3px;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 }
 .post-meta a {
     color: white;
     text-decoration: underline;
     font-weight: bold;
 }

 .post {
     background-color: white;
     color: black;
     padding: 15px;
 }

 .post ol {
     list-style-type: none;
     list-style-type: decimal !ie;
     /*IE 7- hack*/
     margin: 0;
     margin-left: 3em;
     padding: 0;
     counter-reset: li-counter;
 }

 .post ol > li {
     position: relative;
     margin-bottom: 20px;
     padding-left: 0.5em;
     min-height: 3em;
     border-left: 2px solid #CCCCCC;
 }

 .post ol > li:before {
     position: absolute;
     top: 0;
     left: -1em;
     width: 0.8em;
     font-size: 3em;
     line-height: 1;
     font-weight: bold;
     text-align: right;
     color: #464646;
     content: counter(li-counter);
     counter-increment: li-counter;
 }

 .post p:last-child {
     margin-bottom: 0 !important;
 }

 .post h1 {
     font-size: 34px;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 7px;
 }

 .post a {
     color: black;
     text-decoration: none;
 }

 .page {
     width: 550px;
     margin: 0 auto;
     background-color: white;
     padding: 15px;
 }

 .page p {
     line-height: 22px;
     margin-bottom: 15px;
 }

 .page h1 {
     font-size: 34px;
     text-transform: uppercase;
     font-weight: bold;
     border-bottom: 1px solid black;
     margin-bottom: 7px;
 }

 .leftimage {
     margin: 0 10px 2px -50px;
     float: left;
 }

 .leftcaption {
     margin: 3px 0 0 80px;
     font-style: italic;
     font-size: 11px;
     width: 220px;
 }

 .leftimage img {
     max-width: 300px;
 }

 .rightimage {
     margin: 0 -50px 2px 10px;
     float: right;
 }

 .rightcaption {
     margin: 3px 80px 0 0;
     font-style: italic;
     font-size: 11px;
     width: 220px;
 }

 .rightimage img {
     max-width: 300px;
 }

 aside {
     width: 290px;
     float: right;
 }

 aside h1 {
     color: white;
     font-size: 28px;
     border-bottom: 1px solid white;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 10px;
 }

 aside .widget {
     margin-bottom: 20px;
 }

 aside ul li {
     margin-bottom: 10px;
 }

 aside ul li a {
     font-size: 19px;
     color: white;
     text-decoration: none;
 }

 aside ul li a:hover {
     font-size: 19px;
     color: black;
     background-color: white;
     text-decoration: none;
 }

input[type=text]{
    width: 100%;
    background-color: white;
    color:#505358;
    font-size: 18px;
}

 footer {
     width: 100%;
 }

 footer .widget {
     width: 300px;
     float: left;
     margin-bottom: 20px;
     padding-right: 20px;
 }

 footer h1 {
     color: white;
     font-size: 28px;
     border-bottom: 1px solid white;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 10px;
 }

 footer ul li a {
     font-size: 19px;
     color: white;
     text-decoration: none;
 }

 footer ul li a:hover {
     font-size: 19px;
     color: black;
     background-color: white;
     text-decoration: none;
 }

 .alignleft {
     float: left;
     margin: 0 10px 2px -45px;
 }

 .alignright {
     float: right;
     margin: 0 -45px 2px 10px;
 }

 .fix {
     clear: both;
 }

/************SLIDESHOW************/

.slideshow {
    background-color: #000;
    width: 100%;
    height: 500px;
    position: relative;
}
.slideContainer {
    background-color: #000;
    padding: 10px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.slide {
    width: 100%;
    height: 500px;
    text-align: center;
    background-color: #FFF;
}
.slideMiddle {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.slide img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
.slideInfo {
    width: 100%;
    height: 80%;
    padding: 10px;
    color: #fff;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.slideNav {
    width: 100%;
    padding: 10px;
    background-color: #000;
    color: #fff;
    position:relative;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.prevSlide {
    width: 33.3%;
    float: left;
}
.nextSlide {
    width: 33.3%;
    float: right;
    text-align: right;
}
.slideCount {
    width: 23.3%;
    text-align: center;
    position:absolute;
    left:40%;
}
.slideCredit {
    width: 100%;
    font-style: italic;
    font-size: 12px;
}

  $('.slideCount').each(function(){
    var text='1/'+$(this).parents('div.postContainer').find('.slideContainer').length
    $(this).text(text)
    })
  $(".slideshow").height($(".slideContainer").height());    
  $('.nextSlide').show()  
  $('.prevSlide').hide()

    $('div.nextSlide').click(function (e){
    var count=parseInt($(this).siblings('.slideCount').text())
    var slideshow=$(this).parents('div.postContainer').find('.slideshow')
    var slides = $(slideshow).children().length;
    if(count===slides){
      e.preventDefault()
        }else{
      count++
      $(this).parents('div.postContainer').find('div.slideContainer:first').appendTo(slideshow) 
      $(this).siblings('.slideCount').text(count+'/'+slides)
    }
    if(count===slides){$(this).hide()}else{$(this).parent().find('div.prevSlide').show()}
    });

    $('.prevSlide').click(function (e){
    var count=parseInt($(this).siblings('.slideCount').text().slice(0,-2))
    var slideshow=$(this).parents('div.postContainer').find('.slideshow')
    var slides = $(slideshow).children().length;
    if(count===1){e.preventDefault()}else{
      count--
      $(this).parents('div.postContainer').find('div.slideContainer:last').prependTo(slideshow) 
      $(this).siblings('.slideCount').text(count+'/'+slides)
    } 
    if(count===1){$(this).hide()}else{$(this).parent().find('div.nextSlide').show()} 
    });