私はbxsliderを使用しています。ボタンをクリックすると、スライダー内の各画像を別の画像に置き換える jQuery を作成しようとしています。
HTML:
<!--Slider list-->
<ul class="bxslider">
<li><img src="/img/green1.png" /></li>
<li><img src="/img/green2.png" /></li>
<li><img src="/img/green3.png" /></li>
<li><img src="/img/green4.png" /></li>
</ul>
<!--Button(s)-->
<ul class="colour">
<li id="blue">Blue</li>
</ul>
jQuery:
(function() {
// Variables
var colourLis= $(".colour").children(),
listItems = $(".bxslider li img"),
imgSrc = [ 1, 2, 3, 4, ];
// Click button
colourLis.click(function() {
clickedID = $(this).id;
listItems.each(function(index) {
listItems.attr('src', '/img/' + clickedID + imgSrc[index] + '.png');
});
});
})();
これは見た目も音も紛らわしく、私のコードはおそらく非常にまとまりがないことを知っています-私はこれにかなり慣れていません! 一般的なアドバイスをいただければ幸いです。
とにかく、上記の jQuery は、「青」をクリックすると、スライダー内の 4 つの画像のそれぞれの src が新しい画像に向けられるように変更され、スライダーの内容が変更されるように意図されています。
たとえば、/img/green1.png は /img/blue1.png になり、green2.png は blue2.png になります。
つまり、この方法は一貫して機能していないようです。何が問題なのかを突き止めることはできませんが、コンソールは、インスタンスごとにイメージ 4 のみをロードしているとよく言っています。(つまり、ボタンがクリックされた後、blue4.png が各 li に挿入されます)。
誰かが私を助けることができれば、それは素晴らしいことです!
私はこれを行うためのより良い方法を受け入れています。私が言うように、私は新しいので、この種の操作を行うための最良の方法が何であるかわかりません. 青、赤、オレンジなど、複数の異なるボタンを使用できるように、この関数をスケーリングできるようにしたかったのです。
前もって感謝します。
シラー