JSFiddle脚本不在本地工作

时间:2015-03-12 02:01:21

标签: jquery jsfiddle

我确定这是愚蠢的我不知道但是在这里和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/

提前致谢。

1 个答案:

答案 0 :(得分:1)

将代码放在$(document).ready()中,以便在加载DOM后运行。

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

它适用于jsfiddle,因为您使用了默认的onLoad选项。