change theme when clicking on span

Question

I need a function to get id of the .themechoice span when a quote is clicked, and store it in the variable 'theme' so that the function below changes the theme of the sections to the matching .themeChoice span id

jq

$('.themeChoice').click(function() {
var theme = //need function here
$(this).parent().find('section').addClass(theme);
});   //end click a theme

html in head tag

        <style>
        .light {
            background-color: lightyellow;
            border: double lightgreen small;
            border-radius: 15px;
            padding: 1em;
            margin: 1em;
        }
        .dark {
            background-color: black;
            border: groove darkgray medium;
            border-radius: 15px;
            padding: 1em;
            margin: 1em;
        }
        .neutral {
            background-color: tan;
            border: inset brown thick;
            border-radius: 15px;
            padding: 1em;
            margin: 1em;
        }
        img {
            width: 200px;
        }   
    </style>

html in body

<section>
  <p><h3>Pick a theme by clicking the quote you like most</h3></p>
  <span="" id="light" class="themeChoice"><p>Future's so bright, you'll need sunshades.</p></span>
  <span id="dark" class="themeChoice"><p>“Everyone is a moon, and has a dark side which he never shows to anybody.” -Mark Twain</p></span>
  <span id="neutral" class="themeChoice"><p>“The hottest place in Hell is reserved for those who remain neutral in times of great moral conflict.” -Martin Luther King, Jr.</p></span>
  </section>

Answer 1

You can use this.id to get the clicked element's id, and that is the class name here.

$('.themeChoice').click(function() {
  var theme = this.id;
  $(this).parent("section").addClass(theme);
}); 

Also, in your case parent element of .themeChoice is the section. The selector that you have used is wrong.

DEMO

And a stable code that removes the previous theme class and add the newer one is given below,

$('.themeChoice').click(function() {
  var theme = this.id;
  var $parent = $(this).parent("section");
  $parent.removeClass($parent.data("theme")).addClass(theme);
  $parent.data("theme", theme);
});

DEMO

Answer 2

The jQuery().click() function accepts a callback, like you added one. That callback gets called within the context of the clicked element so this inside of your click handler is referring to the clicked element so you can do:

$('.themeChoice').click(function() {
   var theme = $(this).attr('id'); //Should return the id of clicked element a shortcut would be this.id like mentioned by another user
  //Your class adding stuff
});

Answer 3

Thanks. I ended up using this and it worked great:

$('.themeChoice').click(function() {
var theme = this.id;
$('section').addClass(theme);
});

Thank you both for this.id, that helped immensely.