jQuery - непризнанное выражение при передаче переменной в селектор

Question

Я пытаюсь использовать элемент <select> для отображения разных слайдеров изображений в соответствии с выбранной опцией. Я полностью понимаю, что могут быть более эффективные способы сделать это, но поскольку производительность не имеет значения, в этом случае я думаю, что следующий вариант может быть самым простым.

Это 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> 

Я использую Responsive Slides, хотя это на самом деле не имеет значения, так как она работает безупречно. На всякий случай вы задаетесь вопросом о структурах <ul><li></li></ul>.

Все <ul> -элементы имеют display: none, назначенные через CSS.

И это мой JavaScript/JQuery код:

<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> 

Так что, когда я открываю страницу автоматически появится первый альбом. При изменении выбранного <option> он должен скрыть отображаемый альбом (спрятав все из них, так как это самый быстрый способ) и отобразить новый.

Я не знаю, в чем проблема, но когда я пытаюсь это, я получаю следующее сообщение об ошибке в консоли:

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

Который не имеет смысла для меня, потому что это именно селектор Я хочу иметь в моем $(selector).show();. Наверное, это связано с кавычками, но поисковик не помог мне.

Я использую jQuery 1.9.1.

Благодарим вас за любые предложения и решения! :)

Answer 1

Вы добавляете дополнительную пару кавычек (") для вашего выбора

Изменение:..

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

в

var newGallery = gallery + "-slides"; 

и он должен работать правильно

Answer 2

Решение: Удалить дополнительные кавычки здесь:

var newGallery = gallery + "-slides";

Почему? Вы передаете строку в $(), и если вы добавите кавычки к этой строке, окончательная строка, которая окажется в качестве селектора, будет «# yourselector».

Смотрите рабочий код здесь http://jsfiddle.net/Q8bmY/