Question

尽管我很确定这很简单，但我一直在努力解决这个问题...

我只是希望能够在用户点击该图像时为每个LI添加一个图像...

提前感谢您的帮助

<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');
    });

Answer 1

我认为你的意思是：

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

Answer 2

要将该类添加到父li，请使用parents()方法，并将过滤器指定为li。目前，该课程已添加到img。在将添加的类添加到单击的img的父级之前，您还需要删除已添加的类。

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

工作示例 http://jsfiddle.net/SYMpQ/ 我只在示例中添加了两个图像

Answer 3

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

此代码应删除此li中的.img_choice_click并添加新代码。

Answer 4

这可能是你期待的

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

DEMO

Jquery只为每个LI的一个IMG添加类

4 个答案: