2

だから私は3ステップのリスト項目を持っています。

アイテム 1 アイテム 2 アイテム 3

そして、それぞれを選択すると背景画像（矢印）が表示される必要があります。ユーザーが項目 2 をクリックすると、矢印は項目 1 から消え、項目 2 などに表示されます。

私はこのようなことを試しましたが、よくわかりません...

         <script>
                $(".theSteps li").change(function () {
                $(".theSteps li:selected").each(function () {
                $('.theSteps li').css('background-image','url()');
                });
                $('.theSteps li').css('background-image','none');
                })
                .trigger('change');

            </script>
4

2 に答える 2

1

HTML を提供していないため、必要な完全な JavaScript を作成するのは非常に困難です。それを追加していただければ、詳細をお伝えできます。

これを行う最も簡単な方法は、背景画像を使用したい画像の背景画像に設定するために使用されるCSS クラスを作成することです。

リスト項目が選択されているときに関数を実行すると、jQuery 関数を実行しaddClassて新しいクラスを追加し、選択した項目に背景画像を指定できます。

$('#mylistitem').addClass('BackgroundImageClassName');

この行の前で、次を使用して、既存のアイテムからクラスを削除できます。

$('li.BackgroundImageClassName').removeClass('BackgroundImageClassName');

あなたのhtmlが次のようになっていると仮定します：

<ul class="theSteps">
  <li>first item</li>
  <li>second item</li>
</ul>

次のようなコードを使用できます。

$('ul.theSteps li').click(function() { 
  $('li.newBackgroundImageClass').removeClass('newBackgroundImageClass');
  $(this).addClass('newBackgroundImageClass');
});
于 2013-02-22T14:49:49.567 に答える
0

さて、私はあなたのためにここに実用的な解決策を持っています. あなたがする必要があるのは、glow クラスを背景画像になるように変更することです (そして、配置などを整理します)。

http://jsfiddle.net/jezzipin/5J698/

上記の人の何人かがコメントで言ったように、これを行う最良の方法は、クリックした要素でのみアクティブになる css クラスを使用することです。私の例では、このクラスをグローと呼びます ->

  .glow{
 background-color: #FF0000;   
 }

要素の背景色を赤に変更するだけです。

jQuery 関数について (document.ready() を自動的に呼び出すため、フィドルとは異なる場合があります) ->

  jQuery(document).ready(function () {
          $('.theSteps').click(function() {
          $('.theSteps').removeClass('glow');
          $(this).addClass('glow');             
   });

   });

この関数は、クラス .theSteps を持つすべての要素からグロー クラスを削除し、 $(this) で参照できる、クリックされたばかりの要素に適用します。

于 2013-02-22T15:21:12.460 に答える