Jimmy-IN Ответов: 0

Множественный выбор изображений и индикатор выполнения

Я делаю проект и пытаюсь выбрать несколько изображений, и каждый выбор должен увеличивать индикатор выполнения, а отмена выбора изображения должна уменьшать его. Может ли кто-нибудь помочь мне написать java-скрипт или jquery для достижения того же самого? Заранее спасибо. 
<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 для индикатора выполнения:
// 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 + "%";
    
});

});
:

Что я уже пробовал:

Я пыталась забрать детей.функция длины для изображения, но так как у меня есть тег div в нем! Я написал функцию ширины для индикатора выполнения, но это как-то не так.

0 Ответов