显示/隐藏提示文本

Question

我已经创建了一个包含以下内容的.js文件：

$('.emailhinttext').hide();
$('select').change(function() {
if ($(this).val() == 'For yourself, your church, school, a friend etc...') {
    $('.emailhinttext').show();
}
if ($(this).val() == 'A Charity like Oxfam, Marie Curie or Help the Aged') {
    $('.emailhinttext').hide();
}
});

它确实有一些其他的东西(这有关系吗？)我将该文件与jQuery一起包含在页面的页眉中。

我的html是：

<div class="input select">
    <label for="I am raising money for">I am raising money for...</label>
    <select name="data[I am raising money for]" id="I am raising money for">
        <option value="0">A Charity like Oxfam, Marie Curie or Help the Aged</option>
        <option value="1">For yourself, your church, school, a friend etc...</option>
</select></div>
<div class="input text required">
    <label for="UserEmail">Email&nbsp;&nbsp;<div class="emailhinttext">*Please use the same email as your paypal account</div></label>
    <input name="data[User][email]" type="text" maxlength="255" id="UserEmail" />
</div>

它不能工作，即使在jsfiddle上，一些非常类似的东西也能正常工作。我做错了什么？

Answer 1

val()是0或1( value属性的值)，而不是option标记内的文本。因此，更改为if ($(this).val() == 1)将解决您的问题

Answer 2

检查几件事，在脚本之前引用jQuery，还要确保脚本被包装在document.ready调用中，如下所示：

$(document).ready(function(){
    // your code goes here
});

有什么帮助吗？

Answer 3

这种情况经常发生；加载页面时不会执行jQuery代码。您需要将其包装在$(document).ready()函数中，如下所示：

$(document).ready(function()
{
    $('.emailhinttext').hide();

    $('select').change(function() 
    {
        if ($(this).val() == 'For yourself, your church, school, a friend etc...') 
        {
            $('.emailhinttext').show();
        }
        if ($(this).val() == 'A Charity like Oxfam, Marie Curie or Help the Aged') 
        {
            $('.emailhinttext').hide();
        }
    });
});

这将在文档加载后执行jQuery，而不是让它只是停留在DOM中而不做太多事情。