0

I'm trying to use a <select>-element to display different image sliders according to the selected option. I'm totally aware that there might be better ways to do this but since performance doesn't matter in this case I think the following might be the easiest option.

This is the HTML:

<select id="album-select">
    <option value="album1" selected="selected">Album 1</option>
    <option value="album2">Album 2</option>
    <option value="album3">Album 3</option>
    <option value="album4">Album 4</option>
</select>
<ul id="album1-slides" class="rslides">
    <li><img src="img/album/1.jpg" alt=""></li>
    <li><img src="img/album/2.jpg" alt=""></li>
    <li><img src="img/album/3.jpg" alt=""></li>
</ul>
<ul id="album2-slides" class="rslides">
    <li><img src="img/album/4.jpg" alt=""></li>
    <li><img src="img/album/5.jpg" alt=""></li>
    <li><img src="img/album/6.jpg" alt=""></li>
</ul>
<ul id="album3-slides" class="rslides">
    <li><img src="img/album/7.jpg" alt=""></li>
    <li><img src="img/album/8.jpg" alt=""></li>
    <li><img src="img/album/9.jpg" alt=""></li>
</ul>
<ul id="album4-slides" class="rslides">
    <li><img src="img/album/10.jpg" alt=""></li>
    <li><img src="img/album/11.jpg" alt=""></li>
    <li><img src="img/album/12.jpg" alt=""></li>
</ul>

I'm using Responsive Slides, though that doesn't really matter since it works flawlessly. Just in case you are wondering about the <ul><li></li></ul>-structures.

All <ul>-elements have display: none assigned via CSS.

And this is my JavaScript/jQuery code:

<script>

$(document).ready(function() {

          $("#album1-slides").show();

          function changeGallery(gallery) {
               $(".rslides").hide();
               var newGallery = "\"" + gallery + "-slides" + "\"";
               $(newGallery).show();
          }

          $("#album-select").change(function() {
               var gallery = "#" + $("#album-select").val();
               changeGallery(gallery);
          });

     });

</script>

So, when I open the page the first album is automatically displayed. When changing the selected <option> it should hide the displayed album (by hiding all of them since this is the fastest way) and display the new one.

I don't know what the problem is, but when I try it, I get the following error in the console:

Uncaught Error: Syntax error, unrecognized expression: "#album2-slides"

Which makes no sense to me because this is exactly the selector I want to have in my $(selector).show();. I guess it has something to do with the quotes but googling didn't help me.

I'm using jQuery 1.9.1.

Thank you in advance for any suggestions and solutions! :)

1
  • Quotation marks denote a string literal in the source code, they are not part of the actual string value. See the difference between alert("foo"); and alert("\"foo\"");. Commented Mar 18, 2013 at 12:01

2 Answers 2

2

You are adding an extra pair of quotes (") to your selector.

Change:

var newGallery = "\"" + gallery + "-slides" + "\"";

to

var newGallery = gallery + "-slides";

and it should work correctly.

Sign up to request clarification or add additional context in comments.

Comments

0

Solution: Remove the additional quotes here:

var newGallery = gallery + "-slides";

Why ? You pass a String into $() and if you add quotes to that String the final String that ends up as the selector would be '"#yourselector"'.

See working code here http://jsfiddle.net/Q8bmY/

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.