多个图像选择和进度条

我正在做一个项目，我正在尝试选择多个图像，每个选择应该增加进度条，取消选择图像应该减少它。有人可以帮我写出java脚本或jquery来实现同样的目的。提前致谢。

I'm doing a project and I'm trying to select multiple images and each selection should increase the progress bar and deselection of an image should decrease it. Can someone help me out to write the java script or jquery to achieve the same. Thanks in advance.

<div class="col-lg-9" id="brd pics">

        <div class="progress">
        <div class="progress-bar progress-bar-striped active" id="prog" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 1%;">
        </div>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image1.jpg" alt="">
                <a href="" class="prs" id="1">More info</a><span id="s1">This is for some text that appear within the image when u click the more info.This is for some text that appear within the image when u click the more info.This is for some text that appear within the image when u click the more info.This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image2.jpg" alt="">
                <a href="#" class="prs" id="2">More info</a><span id="s2">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image3.jpg" alt="">
                <a href="#" class="prs" id="3">More info</a><span id="s3">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image4.jpg" alt="">
                <a href="#" class="prs" id="4">More info</a><span id="s4">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image5.jpg" alt="">
                <a href="#" class="prs" id="5">More info</a><span id="s5">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image6.jpg" alt="">
                <a href="#" class="prs" id="6">More info</a><span id="s6">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image7.jpg" alt="">
                <a href="#" class="prs" id="7">More info</a><span id="s7">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image8.jpg" alt="">
                <a href="#" class="prs" id="8">More info</a><span id="s8">This is for some text that appear within the image when u click the more info.</span>
            </div>
            <div class=" col-md-4 col-xs-6 thumb">
                <img class="img-responsive img-thumbnail" src="images/image9.jpg" alt="">
                <a href="" class="prs" id="9">More info</a><span id="s9">This is for some text that appear within the image when u click the more info.</span>
            </div>
        </div>

和进度条的JS：

And JS for progress bar:

// progress bar
$(function(){
    var cN = "high";
    var modWidth = 100;
    var prec = 1;
    $(".thumb img").one( "click", function() {
    $(".progress-bar").width( modWidth ).addClass( "mod" );
    modWidth += 96;
        prec = prec + 11;
    document.getElementById("prog").innerHTML = prec + "%";
    
});

});

：



我的尝试：



我已经尝试将children.length函数用于图像，但因为我有div标签！我为进度条编写了一个宽度函数，但它有点不对。

:

What I have tried:

I've tried taking the children.length function for image but as i have div tag in it! I've written a width function for progress bar but its kinda not right.