JSFiddle 脚本无法在本地运行答案

【问题标题】：JSFiddle script not working locallyJSFiddle 脚本无法在本地运行
【发布时间】：2015-03-12 02:01:20
【问题描述】：

我确定这是我想念的愚蠢的东西，但是在此处和 jsfiddle 上搜索后，我只是无法弄清楚如何从 jsfiddle 获取工作脚本以在我的本地服务器上工作。我有 javascript，加载了 jquery 和 html，但它不起作用。我还需要做些什么来让 jsfiddle 脚本在服务器上运行吗？

这是我的测试页面： http://waterwalkmedia.com/link-test.html

好的，再试一次。在 jsfiddle 上有以下代码：

这是 HTML 代码：

    <div id="stateSelection">Jump to State: <a id="Conn" class="state-link"    data-region-type="4" data-region-code="09" href="#">Connecticut</a> | <a id="Maine" class="state-link" data-region-type="4" data-region-code="23" href="#">Maine</a> | <a id="Mass" class="state-link" data-region-type="4" data-region-code="25" href="#">Massachusetts</a> | <a id="Rh" class="state-link" data-region-type="4" data-region-code="44" href="#">Rhode Island</a> 
</div> <span class="lbl">Display by: </span>
 <a id="ctyRegion" class="map-type-link" region_type="1" href="javascript://">County</a> | <a id="msaRegion" class="map-type-link" region_type="2" href="javascript://">Metro-Area</a> 
</div>

这是javascript：

    $('#msaRegion').click(function () {
    $(".state-link").addClass('disableClass');
});
$('#ctyRegion').click(function () {
    $(".state-link").removeClass('disableClass');
});

这是 CSS：

    a {
    color: #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
}
a:link, a:visited, a:active, a:hover {
    color: #333;
}
a:hover {
    background-color: #c7d1d6;
}
.disableClass {
    pointer-events:none;
    text-decoration:none;
    opacity: 0.4;
    cursor:default;
}
.enableClass {
    color: #333;
    outline: none;
    padding-left: 3px;
    padding-right: 3px;
    text-decoration: underline;
    opacity:1;
    pointer-events:all;
    cursor:default;
}

实际工作的 jsfiddle 的链接是：http://jsfiddle.net/8u4jw72h/1/

提前致谢。

【问题讨论】：

欢迎来到 Stack Overflow！请edit您的问题在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决，这个问题将对未来的访问者失去任何价值。发布证明您的问题的Minimal, Complete, Verifiable Example 将帮助您获得更好的答案。有关详细信息，请参阅Something on my web site doesn't work. Can I just paste a link to it? 谢谢！
jsfiddle 链接失效。
现在工作示例的链接将转到 stackoverflow.com 主页。
我觉得自己像个白痴。为什么我不能只放入 jsfiddle 链接？我不断收到错误消息，告诉我必须在前面粘贴 4 个空格的 jsfiddle 代码，但我没有看到所有其他帖子都这样做
我们不希望人们只是发布指向 jsfiddle 的链接。您应该发布实际代码，并使用 jsfiddle 链接作为额外的支持文档。

标签： jquery jsfiddle

【解决方案1】：

将您的代码放入$(document).ready()，以便在加载 DOM 后运行。

$(document).ready(function() {
    $('#msaRegion').click(function () {
        $(".state-link").addClass('disableClass');
    });
    $('#ctyRegion').click(function () {
        $(".state-link").removeClass('disableClass');
    });
});

它在 jsfiddle 中有效，因为您使用了默认的 onLoad 选项。

【讨论】：