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> - 元素都通过CSS分配display: none。

这是我的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/

jQuery - 将变量传递给选择器时无法识别的表达式

2 个答案: