Question

I made a web page that uses jQuery: http://benmccormack.com/demo/MichaelMassPsalm/Psalm16Mode5.html

When you change the selection in the combo box from Higher Key to Lower Key, all of the music images are supposed to change their source to be images that represent the lower key signature. This works great in IE8, but it won’t work in Safari, Firefox, or Chrome.

Why not?

---

Here’s the jQuery code that I’m using:

$(document).ready(function () {
    $("#musicKey").change(function (event) {
        if ($("#musicKey").val() * 1) {
            $("img[src*='Low'").each(function (index) {
                $(this).attr("src", $(this).attr("src").replace("Low", "High"));
            });
        }
        else {
            $("img[src*='High'").each(function (index) {
                $(this).attr("src", $(this).attr("src").replace("High", "Low"));
            });
        }
    });
});

Answer 1

You’re missing closing brackets on your attribute-contains selectors:

$("img[src*='Low']")
//and...
$("img[src*='High']")

At the moment, that invalid selector just isn’t finding anything, so nothing to execute on.