0

これは本当に単純なことだと確信していますが、私はかなり長い間これに苦労してきました...

ユーザーがその画像をクリックしたときに、各 LI に 1 つの画像のクラスを追加できるようにしたいだけです...

助けてくれてありがとう

<ul id="slider-offer">      
    <li class="q_slide" id="q_who">
        <h3>Plutôt famille ou amis?</h3>
        <div class="les_images">
            <img class="img_choice" src="img/questionnaire/famille.jpg" />
            <img class="img_choice" src="img/questionnaire/solo.jpg" /> 
            <img class="img_choice" src="img/questionnaire/couple.jpg" />   
            <img class="img_choice" src="img/questionnaire/amis.jpg" />
        </div>
    </li>

    <li class="q_slide" id="q_when">
        <h3>Saison ?</h3>
        <div class="les_images">
            <img class="img_choice" src="img/questionnaire/printemps.jpg" />
            <img class="img_choice" src="img/questionnaire/ete.jpg" />
            <img class="img_choice" src="img/questionnaire/automne.jpg" />
            <img class="img_choice" src="img/questionnaire/hiver.jpg" />
        </div>
    </li>

    <li class="q_slide" id="q_where">
        <h3>Ambiance ?</h3>
        <div class="les_images">
            <img class="img_choice" src="img/questionnaire/plage.jpg" />
            <img class="img_choice" src="img/questionnaire/city.jpg" />
            <img class="img_choice" src="img/questionnaire/pleinair.jpg" />
            <img class="img_choice" src="img/questionnaire/sport.jpg" />
        </div>
    </li>   

    <li class="q_slide" id="q_length">
        <h3>Trajet ?</h3>
        <div class="les_images">
            <span class="duree" style="float:left">0 H &nbsp &nbsp &nbsp </span>
            <input  style="width:700px; height:20px;" type="range" name="points" min="0" max="600">
            <span class="duree" style="float:right">6H et +</span>
            <br/><br/><br/>
            <p> heures </p>
        </div>
    </li>
</ul>

そして今、私のJQUERYコード:

$('.img_choice').click(function()
    {
        $('.img_choice').removeClass('img_choice_click');
        $(this).addClass('img_choice_click');
    });
4

4 に答える 4

4

私はあなたがこれを意味すると思います：

$('.img_choice').click(function () {
    $(this).addClass('img_choice_click').siblings().removeClass('img_choice_click');
});
于 2013-06-25T09:33:52.427 に答える
1

クラスを親に追加するには、として指定されたフィルターをli使用してメソッドを使用します。現在、クラスは に追加されています。クリックした の親に追加する前に、追加したクラスを削除する必要もあります。parents()liimgimg

$('.img_choice').click(function()
{
     $('li.img_choice_click').removeClass('img_choice_click');
     $(this).parents("li").addClass('img_choice_click');
});

作業例 http://jsfiddle.net/SYMpQ/ この例では 2 つの画像のみを追加しました

于 2013-06-25T09:33:45.633 に答える
0 
$('.img_choice').click(function() {
    $(this).parent("li").find(".img_choice_click").removeClass("img_choice_click");
    $(this).addClass('img_choice_click');
});

このコードは、THIS li の .img_choice_click を削除し、新しいものを追加する必要があります。

于 2013-06-25T09:35:39.310 に答える
0

これはあなたの期待かもしれません

$('.img_choice').click(function()
    {
        $(this).siblings().removeClass('img_choice_click');
        $(this).addClass('img_choice_click');
    });

デモ

于 2013-06-25T09:37:16.983 に答える