jQuery不会在开发站点上运行，而是在在线代码编辑器上运行。找不到冲突

Question

我对jQuery有一个问题，我可以让它在不同的测试环境下工作，但不能在我的开发站点上工作。我似乎找不到冲突的原因。

它应该如何工作:当您悬停在图标上时，它会更改上面可见的div。我让它在这里工作：http://codepen.io/redbranchmedia/pen/dkiCB和http://jsfiddle.net/nXzFX/

HTML：

<div class="outercontainer">
<div class="slidecontainer slide1">
    <div class="innercontainer">
        <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
        <div class="prodpara"><h2>Talemetry</h2><p>is a cloud software solution that provides recruiters with all the tools they need to find, attract &amp; engage top talent. Talemetry works with your Applicant Tracking System and recruiting service providers to deliver a complete talent acquisition solution to support today’s recruiting challenges.</p>
        </div>
        <div class="ctabutton"> 
            <p class="ctatext">Put the Power of Talent Generation to Work At Your Work.</p>
            <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
            <h3 class="ctaaction">Let's Talk >></h3>
        </div>
    </div>
</div>
<div class="slidecontainer slide2 hiddenslide">
    <div class="innercontainer">
        <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
        <div class="prodpara"><h2>Source &amp; CRM</h2><p>Search across all sources of hire, find and rank candidates for immediate job openings, all while building talent networks for the future.</p>
        </div>
        <div class="ctabutton"> 
            <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
            <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
            <h3 class="ctaaction">Request a Demo >></h3>
        </div>
    </div>
</div>
<div class="slidecontainer slide3 hiddenslide">
    <div class="innercontainer">
        <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
        <div class="prodpara"><h2>Job Broadcast</h2><p>Post, manage, and compare the effectiveness of job postings across hundreds of job boards and social media sites all from one system.</p>
        </div>
        <div class="ctabutton"> 
            <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
            <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
            <h3 class="ctaaction">Request a Demo >></h3>
        </div>
    </div>
</div>
<div class="slidecontainer slide4 hiddenslide">
    <div class="innercontainer">
        <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
        <div class="prodpara"><h2>Career Sites</h2><p>Promote jobs and strengthen your employer brand by building career sites using a simple Content Management System.</p>
        </div>
        <div class="ctabutton"> 
            <p class="ctatext">Deliver your employer brand every- where with Talemetry Career Sites.</p>
            <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
            <h3 class="ctaaction">Request a Demo >></h3>
        </div>
    </div>
</div>
<div class="slidecontainer slide5 hiddenslide">
    <div class="innercontainer">
        <img class="productimg" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/300x250default.png" />
        <div class="prodpara"><h2>Apply</h2><p>Capture more of the best applicants by creating a simple, integrated, and social and mobile-ready application process.</p>
        </div>
        <div class="ctabutton"> 
            <p class="ctatext">Significantly reduce sourcing time and improve recruiter efficiency.</p>
            <img class="ctaline" src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/vertical_line.png">
            <h3 class="ctaaction">Request a Demo >></h3>
        </div>
    </div>
</div>

<div class="iconcontainer">
    <div class="icon icon1" data-slide="slide1">
        <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/talemetry_icon2.png">
        <p>Talemetry</p>
    </div>
    <div class="icon icon2" data-slide="slide2">
        <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/source_and_crm.png">
        <p>Source &amp; CRM</p>
    </div>
    <div class="icon icon3" data-slide="slide3">
        <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/job_broadcast.png">
        <p>Job Broadcast</p>
    </div>
    <div class="icon icon4" data-slide="slide4">
        <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/career_sites.png">
        <p>Career Sites</p>
    </div>
    <div class="icon icon5" data-slide="slide5">
        <img src="http://talemetry.redbranchmedia.com/wp-content/uploads/2013/08/apply.png">
        <p>Apply</p>
    </div>

</div>

​

CSS：

.outercontainer {
    width:100%;
}

.slidecontainer {
    width:100%;
    height:285px;
}

.slidecontainer.hiddenslide {
    display:none;
}

.slidecontainer.slide1 {
background-color:#b7be10;
}

.slidecontainer.slide2 {
background-color:#374bb5;
}

.slidecontainer.slide3 {
background-color:#ef123e;
}

.slidecontainer.slide4 {
background-color:#efae00;
}

.slidecontainer.slide5 {
background-color:#9d5bb6;
}

.slidecontainer .innercontainer {
    max-width:940px;
}

img.productimg {
    float:right;
}

.prodpara > H2 {
    font-size:30px;
    color:#fff;
}

.prodpara > p {
    font-size:18px;
    color:#fff;
}

.ctabutton p.ctatext {
    font-size:15px;
}

p.ctaline {
    font-size:;
}

h3.ctaaction {
    font-size:20px;
}

.iconcontainer {
    max-width:940px;
    width:100%;
    margin:0 auto;
}

.iconcontainer .icon {
    float:left;
    width:90px;
    text-align: center;
}

.iconcontainer .icon p {
    color:#585858;
    font-size: 14px;
}

JavaScript：

    <script type="text/javascript">
$('.iconcontainer .icon').on(
{
    mouseenter: function()
    {
        $('.outercontainer .slidecontainer').addClass('hiddenslide');
        var show_slide = $(this).attr('data-slide');
        $('.' + show_slide).removeClass('hiddenslide');
    }
});
</script>

我无法让它在我的开发站点上工作(在我想要的地方)：http://talemetry.redbranchmedia.com/

我还在测试页面上设置了它，因为我认为滑块干扰了：http://talemetry.redbranchmedia.com/testing-page/。

不幸的是，它在开发站点上没有工作，但是它正在JSFiddle和CodePen站点上工作。

我尝试过很多事情，包括:从调用不同版本的jQuery，在站点内部调用jQuery，将脚本中的“$”替换为"jQuery“(主题作者似乎做到了这一点)等等。

我不知道是什么引起了冲突并阻止了这场冲突的发生。我很感谢你的帮助。

Answer 1

JSFiddle和CodePen通常都在等待dom就绪事件运行您的代码。

如果您的代码在这些站点上运行，我建议将代码包装在$(document).ready()块中，即：

$(document).ready(function(){
  $('.iconcontainer .icon').on(
  {
    mouseenter: function()
    {
        $('.outercontainer .slidecontainer').addClass('hiddenslide');
        var show_slide = $(this).attr('data-slide');
        $('.' + show_slide).removeClass('hiddenslide');
    }
  });
});

Answer 2

尝试在DOM就绪处理程序中封装

$(function () {
    $('.iconcontainer .icon').on({
        mouseenter: function () {
            $('.outercontainer .slidecontainer').addClass('hiddenslide');
            var show_slide = $(this).attr('data-slide');
            $('.' + show_slide).removeClass('hiddenslide');
        }
    });
});

您的脚本是在body之前声明的，并且元素在DOM中还不可用。因此，事件被绑定到一个空的jQuery Object。将代码封装在DOM处理程序中，确保在绑定任何事件之前，DOM中的元素是可用的。如果没有，可以将脚本移到body的结束标记之前。