자바스크립트 질문드립니다

자바스크립트 질문드립니다

QA

자바스크립트 질문드립니다

본문

안녕하세요 진행도를 나타내려고

 

<script>
// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Line(containers, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#000',
  trailColor: '#fff',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  text: {
    style: {
      // Text color.
      // Default: same as stroke color (options.color)
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' % 완료');
  }
});

bar.animate(1.0);  // Number from 0.0 to 1.0
</script>

 

<div id="containers"></div>

 

위와같은 자바스크립트를 사용해서

 

게시판 갤러리 리스트에 적용을 하고있습니다

 

작업 완료되면 등록되는 게시물이라 100%고정으로 사용하고있습니다

 

그런데 게시물 하나일때는 괜찮은데 게시물 2개 3개 여러개일 경우에는 

 

갤러리 리스트에서 아에 나타나지를 않습니다

 

중복되는 문제때문인것같은데 어디를 수정해줘야할까요?

이 질문에 댓글 쓰기 :

답변 1

containers 을 변경하면서 사용해야겠죠..

예) containers1, containers2, containers3 등

<script>
// progressbar.http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Line(containers1, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#000',
  trailColor: '#fff',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  text: {
    style: {
      // Text color.
      // Default: same as stroke color (options.color)
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' % 완료');
  }
});

bar.animate(1.0);  // Number from 0.0 to 1.0
</script>

 

<div id="containers1"></div>

아이님 알려주신걸 넣으니까 첫번째 게시물만 나오고
두번째거는 아직도 안나오네요 ㅜㅜ도저히안되서 게시판 전체 소스 올립니다ㅜ
[code]
<div class="list-body">
<?php
for ($i=0; $i < $list_cnt; $i++) {

//공지글 제외
if($list[$i]['is_notice']) continue;

//라벨 체크
$wr_label = '';
$is_lock = false;
if ($list[$i]['icon_secret'] || $list[$i]['is_lock']) {
$is_lock = true;
$wr_label = '<div class="label-cap bg-orange">Lock</div>';
} else {
if ($wr_id == $list[$i]['wr_id']) {
$wr_label = '<div class="label-cap bg-green">Now</div>';
} else if ($list[$i]['icon_hot']) {
$wr_label = '<div class="label-cap bg-red">Hot</div>';
} else if ($list[$i]['icon_new']) {
$wr_label = '<div class="label-cap bg-blue">New</div>';
}
}

// 링크이동
$list[$i]['target'] = '';
if($is_link_target && !$list[$i]['is_notice'] && $list[$i]['wr_link1']) {
$list[$i]['target'] = $is_link_target;
$list[$i]['href'] = $list[$i]['link_href'][1];
}

// 썸네일
$wr_vicon = ($is_vicon && ($list[$i]['as_list'] == "2" || $list[$i]['as_list'] == "3")) ? '<i class="fa fa-play-circle-o wr-vicon"></i>' : ''; // 비디오 아이콘
$thumb = apms_wr_thumbnail($bo_table, $list[$i], $thumb_w, $thumb_h, false, true); // 썸네일
$wr_thumb = ($thumb['src']) ? '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" class="wr-img">' : '<div class="thumb-icon'.$fa_color.'"><div class="wr-fa">'.$fa_photo.'</div></div>';

// 날짜
$wr_date = ($is_date) ? '<div class="wr-date en">'.date($is_dtype, $list[$i]['date']).'</div>' : '';

// 회원사진
$wr_mb = '';
if($is_mb) {
$wr_mb = apms_photo_url($list[$i]['mb_id']);
$wr_mb = ($wr_mb) ? '<span class="wr-mb"><img src="'.$wr_mb.'"></span>' : '<span class="wr-mb"><i class="fa fa-user"></i></span>';
}

?>


<div class="list-row">
<div class="list-col">
<div class="list-box<?php echo ($wr_id == $list[$i]['wr_id']) ? ' active' : '';?>">
<div class="list-front">
<div class="list-img">
<a href="<?php echo $list[$i]['href'];?>"<?php echo $list[$i]['target'];?><?php echo $is_modal_js;?>>
<?php if($is_masonry && $thumb['src']) { ?>
<div class="list-thumb">
<?php echo $wr_label;?>
<?php echo $wr_vicon;?>
<?php echo $wr_date;?>
<?php echo $wr_thumb;?>
</div>
<?php } else { ?>
<div class="imgframe">
<div class="img-wrap">
<?php echo $wr_label;?>
<?php echo $wr_vicon;?>
<?php echo $wr_date;?>
<div class="img-item">
<?php echo $wr_thumb;?>
</div>
</div>
</div>
<?php } ?>
</a>
<?php if ($is_checkbox) { ?>
<div class="list-chk">
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
</div>
<?php } ?>


</div>

<?php echo $is_shadow; //그림자 ?>
<div class="list-text">
<?php if($is_category) { ?>
<div class="div-title-underline-thin font-12">
<?php echo ($list[$i]['ca_name']) ? $list[$i]['ca_name'] : '미분류';?>
</div>
<div class="clearfix"></div>
<?php } ?>
<div id="containers<? echo $i?>"></div>
<div class="list-desc">
<h2>
<a href="<?php echo $list[$i]['href'];?>">
<?php echo $list[$i]['subject'];?>
</a>
</h2>

</div>
<div class="list-info font-12">
<div class="pull-left">
<?php echo $wr_mb;?>
<?php echo ($is_name) ? $list[$i]['name'] : ''; ?>
</div>
<div class="pull-right en font-14">
<?php if($is_dpoint) { ?>
<i class="fa fa-gift green"></i>
<?php echo $list[$i]['as_down'];?>
<?php } ?>
<?php if($is_down) { ?>
<i class="fa fa-download skyblue"></i>
<?php echo $list[$i]['as_download'];?>
<?php } ?>
<?php if($is_visit) { ?>
<i class="fa fa-share navy"></i>
<?php echo ($list[$i]['wr_link1_hit'] + $list[$i]['wr_link2_hit']);?>
<?php } ?>
<?php if($is_good) { ?>
<i class="fa fa-heart orangered"></i>
<?php echo $list[$i]['wr_good'];?>
<?php } ?>
<?php if($is_nogood) { ?>
<i class="fa fa-meh-o"></i>
<?php echo $list[$i]['wr_nogood'];?>
<?php } ?>
<?php if($is_hit) { ?>
<i class="fa fa-eye violet"></i>
<?php echo $list[$i]['wr_hit'];?>
<?php } ?>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="clearfix"></div>
<?php if (!$is_list) { ?>
<div class="wr-none">게시물이 없습니다.</div>
<?php } ?>
</div>
[code]

<script>
// progressbar.http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Line(containers1, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#000',
  trailColor: '#fff',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  text: {
    style: {
      // Text color.
      // Default: same as stroke color (options.color)
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {color: '#FFEA82'},
  to: {color: '#ED6A5A'},
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' % 완료');
  }
});

bar.animate(1.0);  // Number from 0.0 to 1.0
</script>

답변을 작성하시기 전에 로그인 해주세요.
전체 123,117 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT