Jquery为每个LI的一个IMG添加类答案

【问题标题】：Jquery add class for only one IMG of each LIJquery为每个LI的一个IMG添加类
【发布时间】：2013-06-25 09:31:31
【问题描述】：

尽管我很确定这很简单...

我只想在用户单击该图像时为每个 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');
    });

【问题讨论】：

哪一个？第一的？最后一个？
你的代码看起来不错的问题是什么

标签： jquery image class

【解决方案1】：

我认为你的意思是：

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

【讨论】：

您错过了将此类添加到父级的部分。我不确定是否有人真正阅读过这个问题。
我必须承认我不确定 OP 是否想将类添加到父级或仅添加到元素。当我阅读问题时，它仅适用于点击的图像。
@roasted 重读后，并不清楚究竟是什么预期，但我认为一个类def需要继续下去。
非常感谢，这正是我想要的！

【解决方案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/ 示例中我只添加了两张图片

【讨论】：

这将独立于每个 li 删除 '.img_choice_click' 类
@roasted 考虑到它的具体程度，我认为不会随意放置这个类，但我还是缩小了选择范围。
我的意思是，据我了解的问题，OP 只想要一张带有 LI 类的图像，因此每页可以有多个带有“img_choice_click”类的图像

【解决方案3】：

$('.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 并添加新的。

【讨论】：

【解决方案4】：

这可能是你的期望

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

DEMO

【讨论】：