javascript - 从输入框获取值，根据一定条件改变url

Question

应该很简单，但我就是不明白为什么这行不通!首先，我是一名 n00b。

我有两个输入框，用户需要填写，名称和金额。如果这些已填写，我会更改 URL 上的查询字符串，如果没有，则为它们提供预定义的 URL 查询字符串。

我无法得到一个可用的 jsfiddle，因为我的查询字符串的 & 符号发生了一些奇怪的事情，叹气。

基本上，我无法在点击时更改 URL。

这是我的代码，以及感兴趣的人的非工作 jsfiddle:http://jsfiddle.net/9uk68m6x/

        <form>
                <input type="text" class="name">
                <input type="text" class="amount">
            <script type="text/javascript">

                $(function() {

                    $('.makeUrl').click(function(){
           var url = 'http://www.website.com',
           nameVal = $("input.name").val(),
                         amountVal = $("input.amount").val();
                         if (nameVal != ''){
                            //if name value isn't blank, then
                                $("a.makeUrl").prop("href", url+'&name='+nameVal+'&free_amount=1&amount='+amountVal+'00');
                            }
                            else (nameVal == ''){
                                $("a.makeUrl").prop("href", "http://www.website.com&free_amount=1&amount=200");
                            }

                    });

                });
            </script>
            <a href="http://www.website.com&free_amount=1&amount=200" class="ctaButton makeUrl">Donate</a>
        </form>

Answer 1

您的脚本中存在语法错误:else 不接受任何类型的参数。请改用else if。但是，由于您的条件是二进制的(nameVal 要么为空，要么不为空)，那么您实际上可以不需要第二个 if 语句。

因此，我做了一些更改:

• 修改条件语句。您只需检查 nameVal 是否为空或不使用表达式 !nameVal。
• 使用 .attr() 而不是 .prop() 更改 href 属性。
• 在点击函数中使用 $(this)，因为它已被缓存

这是 fiddle :http://jsfiddle.net/teddyrised/9uk68m6x/4/

$(function () {
    $('.makeUrl').click(function (e) {
        // Declare variables
        var url = 'http://www.website.com',
            nameVal = $("input.name").val(),
            amountVal = $("input.amount").val();

        // Conditional statement
        if (nameVal) {
            //if name value isn't blank, then
            $(this).attr("href", url + '&name=' + nameVal + '&free_amount=1&amount=' + amountVal + '00');
        } else {
            $(this).attr("href", "http://www.website.com&free_amount=1&amount=200");
        }

        // Check updated href
        console.log($(this).attr("href"));
    });
});