JavaScript vs Classes and ID's

JavaScript
1

I work primarily with PHP and don’t understand JavaScript very well. I’m working with a multi-choice quiz script that has some JavaScript functions. it works fine, but it’s very hard to add classes or ID’s to any elements without killing the function.

For example, the HTML begins with this…

<div id="quiz" rel="key">
  <ol>

I’d like to change it to this…

<div id="quiz" rel="key">
  <ol class="Answers">

But when I do that the quiz engine no longer works. I suspect I’m going to have a lot of trouble using jQuery to add and delete classes when people push the submit button.

I posted some code at http://jsfiddle.net/5q2xoLn7/4/ However, it doesn’t actually work because I don’t know how to incorporate the JSON answer key, which is stored in a separate file.

Does anyone have any general tips for fixing this kind of problem, or do I just have to learn JavaScript well enough to go through the code line by line, modifying it to accept every change in a class or ID?

Thanks.

2

Why are you finding the need to add the class in the first place?

After all, it’s easy enough to use the existing elements to obtain the answer sections with #quiz ol

3

You’re right; I chose a bad example. But it is a pain when I can’t add or change a class or ID, or I can’t even add a second class without killing the function. The code below was working perfectly with my first quiz script. At first, when I click on an answer, it was highlighted. If I changed my mind and chose a second answer, BOTH answers were highlighted. The code below fixes that so that when you click on a second answer, the first choice is “deselected.”

<script>
$(".Answers li").click(function () {
    $("." + this.id + "-A").removeClass("selected");
    $("." + this.id + "-B").removeClass("selected");
    $("." + this.id + "-C").removeClass("selected");
    $("." + this.id + "-D").removeClass("selected");
    $(this).addClass("selected");
</script>

But when I tried a new quiz script, I ran into problems. The code still assigns the class “selected” to answers I click, but it no longer deselects answers when I click additional answers. I changed this.id to this.class to match my new script. But it didn’t deselect answers, plus it created some kind of conflict that killed the script’s function. So I inserted a div inside each li tag, and modified the script to select .Question li div.

$(".Question li div").click(function () {
    $("." + this.class + "-A").removeClass("selected");
    $("." + this.class + "-B").removeClass("selected");
    $("." + this.class + "-C").removeClass("selected");
    $("." + this.class + "-D").removeClass("selected");
    $(this).addClass("selected");

Now the script works pretty good. The quiz actually works, and answers are highlighted when you click on them. But, again, the deselect (removeClass) function doesn’t work.

This is what my HTML looks like:

<div id="quiz" rel="key">
  <ol>
    <li id="q1" class="Question"><span class="Q2">1. No one knows if there&#8217;s just one universe or a series of universes, sometimes referred to as a:</span>
      <ol>
        <li class="1-A">
          <div class="Ans2">
            <label> A.
              <input type="radio" name="q1">
              multiverse </label>
          </div>
        </li>
        <li class="1-B">
          <div class="Ans2">
            <label> B.
              <input type="radio" name="q1">
              parallel universe </label>
          </div>
        </li>
      </ol>
    </li>
    <li id="q2" class="Question"><span class="Q2">2. Scientists believe the universe is:</span>
      <ol>
        <li class="2-A">
          <div class="Ans2">
            <label> A.
              <input type="radio" name="q2">
              shrinking </label>
          </div>
        </li>
        <li class="2-B">
          <div class="Ans2">
            <label> B.
              <input type="radio" name="q2">
              expanding </label>
          </div>
        </li>
      </ol>
    </li>
  </ol>
  <input type="button" value="Submit" class="submit">
  <p class="feedback"></p>
</div>
4

That’s because you’re adding and removing classes from different elements on the page.

The class is added to this which is the DIV element, but your removal is happening on the *-A or *-B class that’s on the LI element.

The easiest solution is to remove selected from all of the divs in the ol list, which can be achieved as easily as this:

$('div', $(this).parents('ol')).removeClass("selected");

If you want to get more specific, you can target the Ans2 class name itself:

$('.Ans2', $(this).parents('ol')).removeClass("selected");

and if you think you’ll have ans1 or ans3 variations to deal with, you can target class names that start with Ans

$('[class^="Ans"]', $(this).parents('ol')).removeClass("selected");
5

The problem is happening because you’re attempting to remove the class from the wrong place.

Currently you are adding the class to the DIV element, and removing it from the LI element.

What you can do about this is to remove the class from all divs inside of the OL element

$('div', $(this).closest('ol')).removeClass("selected");

Or, if you want to target the class name instead:

$('Ans2', $(this).closest('ol')).removeClass("selected");

Or, if you think you’ll have Ans1 and Ans3 variations to deal with:

$('[class^="Ans"]', $(this).closest('ol')).removeClass("selected");
6

Wow, elegant solution(s).

I encountered one more problem…when I moved on to Question #2 and make a selection, it removed all the “selected” classes from Question #1. However, I was able to fix that by simply changing parents(‘ol’) to parents(‘ol ol’), better reflecting the structure of my HTML.

$('div', $(this).parents('ol ol')).removeClass("selected");

Thanks for the variations; it really helps me get a handle on this stuff. :wink:

7

Yes, parents should be closest. I updated my post earlier with the correction.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.