0

<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: noneCSS 経由で割り当てられています。

そして、これは私の 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 に答える