Question

我是JS和jQuery的新手。我有一个应用程序从用户获取输入然后将其打印到屏幕上。我现在想添加一些jQuery来改变.CSS属性。将阵列打印到屏幕后，单击“更改我的外观”链接...我想将颜色更改为蓝色，然后删除“更改我的外观”链接。现在似乎没有什么工作，我有点失去任何帮助非常感激。这是我的HTML：

<h1 id='heading'></h1>        
<div id='grocery-list'>
    <ol class='items' id='list-items'>          
    </ol>
</div>
<a href='#list' id='change-look'>Change my Look</a>
   <div id='footer'>
    <p>
      &copy; Copyright  by Jake
    </p>
   </div>

这是我的js / jQuery

(document).ready(function() {           
        var groceries = getGroceries();
        printGroceries(groceries);
        $('#list').html('<h1>My Grocery List.</h1>');
        $('#change-look').click(fucntion() {
            $('#grocery-list').css('color','blue');
            $('h1').css('font-weight','bold','font-variant','small-caps','text-decoration','underline');
        };
        $('#change-look').not(this).find('a').removeAttr('href');

}
//var groceries = getGroceries();
//printGroceries(groceries);


function getGroceries() {

var canExit = false;
var myGroceries = new Array();
var grocery = null;
while (grocery != 'q') {

    grocery = prompt("Enter an item to add to the grocery list (enter \‘q\’ to quit):", null);

    if ((grocery !== null) && (grocery != "q")) {
         myGroceries.push(grocery);
        canExit = true;
    }
}
return myGroceries;

}

function printGroceries(myGroceries) {

 if (myGroceries.length > 0) {
    //document.write("Here’s your grocery list:<br><br>" + myGroceries.join("<br><br>"));
    $('#list-items').html("<h1>My grocery list:</h1><br><br>" + myGroceries.join("<br><br>"));

    } else {//document.write("Sorry, your list is empty.");}
    $('#list-items').html("<p>Sorry, your list is empty</p>");}
}

Answer 1

您的代码中的函数拼写错误

$('#change-look').click(function() {

首先尝试纠正。

Answer 2

你有几个sytanx问题/错误。人们已经指出了一个。那些是你没有正确调用就绪功能......

此...

(document).ready(function() {

必须更改为....

$(function(){

而且你还没有正确关闭函数调用。将您的jQuery代码替换为...

$(function() {           
        var groceries = getGroceries();
        printGroceries(groceries);
        $('#list').html('<h1>My Grocery List.</h1>');
        $('#change-look').click(function() {
            $('#grocery-list').css('color','blue');
            $('h1').css('font-weight','bold','font-variant','small-caps','text-decoration','underline');
        });
        $('#change-look').not(this).find('a').removeAttr('href');

});

你应该准备好了。您可以查看此JS Fiddler

Answer 3

您的代码中有两个错误

时代指出

one，函数拼写在您的代码中是错误的改变它

$('#change-look').click(function() {

second是

更改(document).ready(function() {

（缺少$标志）

到

$(document).ready(function() {

来自http://www.w3schools.com/jquery/jquery_syntax.asp

>Basic syntax is: $(selector).action()
>A $ sign to define/access jQuery 
>A (selector) to "query (or find)" HTML elements 
>A jQuery action() to be performed on the element(s)

Answer 4

除了其他人提到的内容之外，用作推送到数组的用户输入的groceries字符串应该包含在<li>标记中，因为它位于无序列表中，{ {1}}。否则它将是无效的HTML。

此外，对于您的链接，如果您想在单击后删除“href”属性，则需要输入以下行：

<ol></ol>

而不是：

$('#change-look').removeAttr('href');

点击事件的

内部，而非外部。如果您想在点击后完全删除它，您可以使用：

$('#change-look').not(this).find('a').removeAttr('href');

DEMO：http://jsfiddle.net/kaizora/YcqdZ/

jQuery更改.CSS通过单击链接

4 个答案: