JS和jQuery的麻烦

Troubles with JS and jQuery

本文关键字:麻烦 jQuery JS      更新时间:2023-09-26

在我开始之前,我要指出我非常,非常不熟悉JS和jQuery,所以如果这看起来像是对一个非常愚蠢的问题的非常简单的修复,那就是预期的。

我有一个问题,我想解决使用JS和jQuery其中的脚本是用来插入内容到页面。下面是浏览器在控制台/调试器中被捕获的部分:

if(fname != "" && fname != null) {
    var newRow = 'A very long string whose contents are irrelevant here.'
    $( ".all-waiting" ).append( newRow );
}

的部分,它得到挂在具体是$在jQuery语句应该是用来添加字符串的内容到特定的页面元素。我从一个在线教程中复制了jQuery语句的格式,并根据我为另一个项目复制的版本进行了验证,并成功地进行了工作。我哪里做错了?我应该怎么做,以附加字符串newRow.all-waiting ?

如果它有任何不同,我将通过一个外部JS页面导入到我自己创建的HTML页面来引入这个脚本。

谢谢你的帮助!

编辑:这是JS代码的完整相关部分:

/*    ~~~~ Get's variables from URL ~~~~    */
// Syntax: getUrlVars()["variable"];
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
var fname  = getUrlVars()["fname"];
var lname  = getUrlVars()["lname"];
var action = getUrlVars()["action"];
var other  = getUrlVars()["other"];

if(fname != "" && fname != null) {
    var newRow = '<tr><td class="time">00:00</td><td class="customer"><div class="cust-name">' + fname + ' ' + lname + '    </div><div class="cust-deets">Female, 40</div></td><td class="area none">' + action + '</td><td class="menu">___</td></tr>'
    $( ".all-waiting" ).append( newRow );
}

和相关的HTML部分:

<table class="all-waiting">
    <tr>
        <td class="time long">
            15:30
        </td>
        <td class="customer">
            <div class="cust-name">
                Samantha Wilson 
            </div>
            <div class="cust-deets">
                Female, 35
            </div>
        </td>
        <td class="area">
            Foreign currency
        </td>
        <td class="menu">
            ___
        </td>
    </tr>
    <tr>
        <td class="time">
            09:00
        </td>
        <td class="customer">
            <div class="cust-name">
                Ethan Blucher 
            </div>
            <div class="cust-deets">
                Male, 26
            </div>
        </td>
        <td class="area">
            Business banking
        </td>
        <td class="menu">
            ___
        </td>
    </tr>
</table>

脚本应该根据URL参数向表中添加新行。

似乎你没有引用或加载jQuery之前你的脚本。

先试着替换

<script src="js/jquery.js"></script> 
与…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

如果这不起作用,那么当你试图使用它时,这是一个jQuery尚未加载的问题。如果是这样的话,我会改变我的答案,但我对此表示怀疑。替换这一行可能会起作用,并且我们知道在加载jQuery时问题代码会起作用(正如Arun的小提琴所证明的那样)。因此,如果这样做,那么它只是为您的<script>标签的src属性获得正确路径的问题。

根据你的注释,你的文件结构像…

~/page.html
~/script.js
~/js/jquery.js

所以要确保你已经将jQuery源代码保存为jquery.js,并保存在HTML文件所在文件夹下的子文件夹js中,或者找到/下载它并/或相应地更新路径