jQuery Change .CSS, щелкнув ссылку

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

У вас есть пара проблем/ошибок в ситанке. Одна из них уже указана Эрой. Те, что вы не зовете готовую функцию должным образом ...

Этих ...

(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 2

Функция правописание неправильно в вашем коде

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

пытаются исправлять, что первый.

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>, так как он находится в неупорядоченном списке, <ol></ol>. Это было бы неверным HTML, иначе.

Кроме того, для вашей ссылки, если вы хотите, чтобы удалить атрибут 'HREF' после нажатия кнопки, вам нужно будет поставить эту строку:

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

вместо:

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

внутри события click, а не снаружи. Если вы хотите, чтобы удалить его полностью после щелчка, вы можете использовать:

$('#change-look').remove();

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