0

尽管我很确定这是非常简单的事情，但我已经为此苦苦挣扎了很长一段时间...

当用户单击该图像时，我只想能够在每个 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');
    });
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()带有指定为 的过滤器的方法li。目前该类正在添加到img. 在将其添加到 clicked 的父级之前，您还需要删除添加的类img。

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

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

于 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 回答