JavaScript无法在wordpress页面中运行

时间:2014-04-28 17:24:38

标签: javascript wordpress

我将以下代码添加到我的wordpress页面:

<form action="#" method="post"><label for="number">Number of guests: *
<input name="number" type="radio" value="1" />1
<input name="number" type="radio" value="2" />2
<input name="number" type="radio" value="3" />3
<input name="number" type="radio" value="4" />4
<input name="number" type="radio" value="5" />5</label>
<div id="rsvp1" style="display:none"><label for="name">Name: *
<input name="name" type="text" value="" />
</label>
<label for="attending">Attending?: *
<input name="attending" type="radio" value="Yes" />Yes
<input name="attending" type="radio" value="No" />No</label>
<label for="dietary">Dietary Requirements?: *
<input name="dietary" type="checkbox" value="veggie" />Veggie


<input name="dietary" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies"></textarea>
</label>
<label for="notes">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes"></textarea>
</label></div>
<div id="rsvp2" style="display:none"><label for="name1">Name: *
<input name="name1" type="text" value="" />
</label>
<label for="attending1">Attending?: *
<input name="attending1" type="radio" value="Yes" />Yes
<input name="attending1" type="radio" value="No" />No</label>
<label for="dietary1">Dietary Requirements?: *
<input name="dietary1" type="checkbox" value="veggie" />Veggie


<input name="dietary1" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies1"></textarea>
</label>
<label for="notes1">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes1"></textarea>
</label></div>
<div id="rsvp3" style="display:none"><label for="name2">Name: *
<input name="name2" type="text" value="" />
</label>
<label for="attending2">Attending?: *
<input name="attending2" type="radio" value="Yes" />Yes
<input name="attending2" type="radio" value="No" />No</label>
<label for="dietary2">Dietary Requirements?: *
<input name="dietary2" type="checkbox" value="veggie" />Veggie


<input name="dietary2" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies2"></textarea>
</label>
<label for="notes2">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes2"></textarea>
</label></div>
<div id="rsvp4" style="display:none"><label for="name3">Name: *
<input name="name3" type="text" value="" />
</label>
<label for="attending3">Attending?: *
<input name="attending3" type="radio" value="Yes" />Yes
<input name="attending3" type="radio" value="No" />No</label>
<label for="dietary3">Dietary Requirements?: *
<input name="dietary3" type="checkbox" value="veggie" />Veggie


<input name="dietary3" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies3"></textarea>
</label>
<label for="notes3">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes3"></textarea>
</label></div>
<div id="rsvp4" style="display:none"><label for="name4">Name: *
<input name="name4" type="text" value="" />
</label>
<label for="attending4">Attending?: *
<input name="attending4" type="radio" value="Yes" />Yes
<input name="attending4" type="radio" value="No" />No</label>
<label for="dietary4">Dietary Requirements?: *
<input name="dietary4" type="checkbox" value="veggie" />Veggie


<input name="dietary4" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies4"></textarea>
</label>
<label for="notes4">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes4"></textarea>
</label></div>
<input name="submitted" type="hidden" value="1" />
<input type="submit" />

</form>

<script type="text/javascript">
    function showRSVP() {
    var checked = this,
        n = parseInt(checked.value, 10),
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),
        tmp;

    for (var i = 0, len = rsvpElems.length; i < len; ++i){
        tmp = rsvpElems[i];
        tmp.style.display = i < n ? 'block' : 'none';
    }
}

var radios = document.querySelectorAll('input[name="number"][type="radio"]');

for (var i = 0, len = radios.length; i < len; i++){
    radios[i].addEventListener('change', showRSVP);
}
</script>

然而,javascript不起作用,它在jsfiddle HERE中起作用,但在wordpress页面中却没有。

该网页已有效HERE

1 个答案:

答案 0 :(得分:1)

要在帖子或页面中使用script,您需要将其另存为外部文件,然后调用js functionCODEX

所以在你的情况下 - 制作一个新的js文件并将你的脚本放入。(保存为rsvp.js)

function showRSVP() {
    var checked = this,
        n = parseInt(checked.value, 10),
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),
        tmp;

    for (var i = 0, len = rsvpElems.length; i < len; ++i){
        tmp = rsvpElems[i];
        tmp.style.display = i < n ? 'block' : 'none';
    }
}

var radios = document.querySelectorAll('input[name="number"][type="radio"]');

for (var i = 0, len = radios.length; i < len; i++){
    radios[i].addEventListener('change', showRSVP);
}

然后在你的帖子中添加:

<script type="text/javascript" src="YOUR_LOCATION/rsvp.js"></script>
<script type="text/javascript">
<!--
showRSVP();
//--></script>