0

我正在尝试使用<select>-element 根据所选选项显示不同的图像滑块。我完全知道可能有更好的方法来做到这一点，但由于在这种情况下性能并不重要，我认为以下可能是最简单的选择。

这是 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。

提前感谢您的任何建议和解决方案！:)

4

2 回答 2

2

您正在向选择器添加一对额外的引号 (")。

改变：

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

至

var newGallery = gallery + "-slides";

它应该可以正常工作。

于 2013-03-18T12:00:42.383 回答
0

解决方案：删除此处的附加引号：

var newGallery = gallery + "-slides";

为什么 ？你将一个字符串传递给 $()，如果你在那个字符串中添加引号，最终作为选择器的字符串将是 '"#yourselector"'。

请参阅此处的工作代码http://jsfiddle.net/Q8bmY/

于 2013-03-18T12:07:52.050 回答