多个图像选择和进度条 [英] Multiple image selection and progress bar

问题描述

我正在做一个项目，我正在尝试选择多个图像，每个选择应该增加进度条，取消选择图像应该减少它。有人可以帮我写出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.

推荐答案

（ function （ ）{
var cN = high ;
var modWidth = 100 ;
var prec = 1 ;

(function(){ var cN = "high"; var modWidth = 100; var prec = 1;

（ 。thumb img）。one（ 单击， function （）{

(".thumb img").one( "click", function() {

（ 。progress-bar）。width（modWidth）.addClass（ mod）;
modWidth + = 96 ;
prec = prec + 11 ;
document .getElementById（ prog).innerHTML = prec + ％;

}）;

}）;

(".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.

这篇关于多个图像选择和进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！