Question: In a JQuery Assignment i need some help need to Refactor the JQuery Click event on the SPAN tags to call a function, the function

In a JQuery Assignment i need some help

need to Refactor the JQuery Click event on the SPAN tags to call a function, the function should be the object doing the DOM manipulation.

Call the function TextColorChange

The function should take in a single parameter called element, which can be a CSS selector, jQuery element or DOM element.

Make sure that the function only changes the color on the span tag clicked.

Add a button with the id "nameToggle" to your webpage. Create a JQuery Click event for the button that calls a function named ToggleName, the function should hide and show you name.

The function should take in a single parameter called element, which can be a CSS selector, jQuery element or DOM element.

Open the attached JSON file and edit it to your list of hobbies. Once you have edited the list I want you to read it in to your project through a function. The function should be called when the user clicks the button with a id "getHobbies".

To do this add a button to your webpage and give it an id of "getHobbies"

When the button is clicked load the JSON file through an AJAX get request and then display (append) that data to the web page through an unordered list. HINTS

Think about the 'this' element for your function to only change the span clicked.

look at http://api.jquery.com/jquery.getjson/ for help with reading in the JSON file.

html code

Jason todd

Hello my name is jason todd, i have been attending SWIC for two years now. My goal after SWIC is to be a Front-End Web Developer i plan on receiving an Associates degree in Applied science Web Development, And a Certificate in Web Coding At SWIC.

A list of Hobbies

  • Enjoy Ice Skating
  • Spending time with my wife and 6 year old Son Hunter
  • enjoy Sporting events
  • Coding

few hobby links:

Treehouse

Metro rec Plex

jqury code:

$(document).ready(function () { alert("Hello World"); $("span").click( function() { $("span").css("color", "#d49a9a"); $(this).css("color", "#c2c0c0"); }); });

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!