0

私はTシャツのショッピングサイトにOpenCartを使用しており、ラジオボタンを非表示にして、ユーザーに表示されるラベル画像を使用しています. T シャツのウェブサイトであるため、S、M、L XL、XXL、3XL、4XL などのさまざまなサイズの T シャツがあり、各サイズの画像はほとんどありません。私がやろうとしているのは、ユーザーがサイズ(ラジオボタンのラベル画像の1つ)として選択したときに、画像の周りに境界線または輪郭を付けて、そのアイテムを選択したことをユーザーに通知したいということです。多くの T シャツの Web サイトには、サイトで動作する同様の機能があります。

私はウェブを閲覧し、いくつかの異なることを試しましたが、これまでのところうまくいきませんでした.

例を教えてください。または、正しい方向に向けてください。css/htmlだけでそれを行う方法はありますか? またはjavascriptまたはjqueryが必要ですか?

また、これは Opencart サイトであるため、ボタン、ラベル、および画像に含まれる値は、php を介してドキュメントにインポートされていることに注意してください。

ここにページへのリンクがありますので、私が話していることのアイデアを得ることができます. Opencart はテンプレート ファイルと外部 css スタイルシートを使用しているため、どのコードを投稿すればよいかわからないので、URL で十分かもしれません。http://rushedtees.com/AAO%20-%20AMERICAN%20BEAGLE

事前に助けてくれてありがとう。

4

2 に答える 2

0 
shirts.on('input', function () {
    shirts.removeClass('product-info .option-image img');
    $(this).addClass('border-class');
})

上記のコードを削除してみてください。DOMがロードされる前に呼び出されるため、何もしないと思います。$(document).ready(function(){})おそらく、あなたはそれが?の中にあることを意図していました。

その場所に次のコードを追加します 

     $(function () {
        $('.option-image').click(function(ev){
           if(ev.target.tagName !== 'IMG') return;
           $('label', $(this)).removeClass('border-class');
           $(ev.target).closest('label').addClass('border-class');
        })
     });

上記のコードは、選択した を強調表示し<label>ます。このコードは、このイベント委任手法を使用しています。

アップデート

<img>クラスを の代わりにに追加するには<label>、次のコードを使用します。

     $(function () {
        $('.option-image').click(function(ev){
           if(ev.target.tagName !== 'IMG') return;
           $('img', $(this)).removeClass('border-class');
           $(ev.target).addClass('border-class');
        })
     });
于 2013-04-02T09:43:01.800 に答える