我对javascript非常缺乏经验，而且我遇到了无法找到答案的障碍。
这是我正在做的事情： http://www.vibralifeusa.com/slider-test/
以下是我要做的事情： 当您来回拖动滑块时，我希望用户选择的任何数字（div id＆＃34; downText＆＃34;）要相乘并格式化为四个div＆＃34; perYear＆＃34;，＆＃34 ; perTwentyFive＆＃34;，＆＃34; perMonthCoal＆＃34;，＆＃34; perMonthSolar＆＃34;。以下是我为实现此目的而编写的代码：
var a = document.getElementsByClassName('downText')[0].innerHTML;
document.getElementsByClassName('perYear')[0].innerHTML = parseInt(a*18.4);
var a = document.getElementsByClassName('downText')[0].innerHTML;
document.getElementsByClassName('perTwentyFive')[0].innerHTML = parseInt(a*460);
var a = document.getElementsByClassName('downText')[0].innerHTML;
document.getElementsByClassName('perMonthCoal')[0].innerHTML = parseInt(a*1);
var a = document.getElementsByClassName('downText')[0].innerHTML;
document.getElementsByClassName('perMonthSolar')[0].innerHTML = parseInt(a*0.79);<div class="downText" id="downText"></div>
<div class="perYear" id="perYear"></div>
<div class="perTwentyFive" id="perTwentyFive"></div>
<div class="perMonthCoal" id="perMonthCoal"></div>
<div class="perMonthSolar" id="perMonthSolar"></div>
第一个问题是，它只将物理编码的数字乘以div。 （我手动将100放入div中以确保它实际上是相乘的），在拖动滑块时它不会更新该倍数。
第二个问题是，我无法同时对这些数字进行格式化和乘法运算。这是我尝试添加的代码，但是当我这样做时，它会停止乘以数字：
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
});
var amount = document.getElementById('downText').innerHTML;
document.getElementById('perYear').innerHTML = formatter.format(amount);
var amount = document.getElementById('downText').innerHTML;
document.getElementById('perTwentyFive').innerHTML = formatter.format(amount);
var amount = document.getElementById('downText').innerHTML;
document.getElementById('perMonthCoal').innerHTML = formatter.format(amount);
var amount = document.getElementById('downText').innerHTML;
document.getElementById('perMonthSolar').innerHTML = formatter.format(amount);
我知道这是非常基本的东西，但我对javascript非常缺乏经验并且无法解决这个问题，尽管工作了几个小时，所以任何帮助都会非常感激！
答案 0 :(得分：0)
我只是在没有测试的情况下对此进行了尝试，但我认为您必须在＆＃34; dragUpdate＆＃34;中进行所有计算。功能。也许会这样做？
function dragUpdate() {
dragVal = Math.round((this.target._gsTransform.x / maxDrag) * 1000);
select('.downText').textContent = select('.upText').textContent = dragVal;
document.getElementById('perYear').innerHTML = parseInt(dragVal * 18.4, 10);
document.getElementById('perTwentyFive').innerHTML = parseInt(dragVal * 460, 10);
document.getElementById('perMonthCoal').innerHTML = parseInt(dragVal * 1, 10);
document.getElementById('perMonthSolar').innerHTML = parseInt(dragVal * 0.79, 10);
TweenMax.to('#display', 1.3, {
x: this.target._gsTransform.x
})
TweenMax.staggerTo(['.upText', '.downText'], 1, {
// x:this.target._gsTransform.x,
cycle: {
attr: [{
x: this.target._gsTransform.x + 146
}]
},
ease: Elastic.easeOut.config(1, 0.4)
}, '0.02')
}
答案 1 :(得分：0)
引入该错误是因为您没有更新dragUpdate函数的值。我刚刚在dragUpdate函数中移动了乘法逻辑代码并且它正在工作。
您已经放置了下面的代码并期望它在滑块拖动时更新。
var xmlns = "http://www.w3.org/2000/svg",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
container = select('.container'),
dragger = select('#dragger'),
dragVal,
maxDrag = 300
//center the container cos it's pretty an' that
TweenMax.set(container, {
position: 'absolute',
top: '0%',
left: '0%',
xPercent: 0,
yPercent: 0
})
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set('#upText', {
alpha: 0,
transformOrigin: '50% 50%'
})
TweenLite.defaultEase = Elastic.easeOut.config(0.4, 0.1);
var tl = new TimelineMax({
paused: true
});
tl.addLabel("blobUp")
.to('#display', 1, {
attr: {
cy: '-=40',
r: 30
}
})
.to('#dragger', 1, {
attr: {
//cy:'-=2',
r: 8
}
}, '-=1')
.set('#dragger', {
strokeWidth: 4
}, '-=1')
.to('.downText', 1, {
//alpha:0,
alpha: 0,
transformOrigin: '50% 50%'
}, '-=1')
.to('.upText', 1, {
//alpha:1,
alpha: 1,
transformOrigin: '50% 50%'
}, '-=1')
.addPause()
.addLabel("blobDown")
.to('#display', 1, {
attr: {
cy: 299.5,
r: 0
},
ease: Expo.easeOut
})
.to('#dragger', 1, {
attr: {
//cy:'-=35',
r: 13
}
}, '-=1')
.set('#dragger', {
strokeWidth: 0
}, '-=1')
.to('.downText', 1, {
alpha: 1,
ease: Power4.easeOut
}, '-=1')
.to('.upText', 0.2, {
alpha: 0,
ease: Power4.easeOut,
attr: {
y: '+=45'
}
}, '-=1')
Draggable.create(dragger, {
type: 'x',
cursor: 'pointer',
throwProps: true,
bounds: {
minX: 0,
maxX: maxDrag
},
onPress: function() {
tl.play('blobUp')
},
onRelease: function() {
tl.play('blobDown')
},
onDrag: dragUpdate,
onThrowUpdate: dragUpdate
})
function dragUpdate() {
dragVal = Math.round((this.target._gsTransform.x / maxDrag) * 1000);
select('.downText').textContent = select('.upText').textContent = dragVal;
var a = document.getElementsByClassName('downText')[0].innerHTML;
document.getElementsByClassName('perYear')[0].innerHTML = parseInt(dragVal*18.4);
var b = document.getElementsByClassName('downText')[0].innerHTML;
document.getElementsByClassName('perTwentyFive')[0].innerHTML = parseInt(a*460);
var c = document.getElementsByClassName('downText')[0].innerHTML;
document.getElementsByClassName('perMonthCoal')[0].innerHTML = parseInt(a*1);
var d = document.getElementsByClassName('downText')[0].innerHTML;
document.getElementsByClassName('perMonthSolar')[0].innerHTML = parseInt(a*0.79);
TweenMax.to('#display', 1.3, {
x: this.target._gsTransform.x
})
TweenMax.staggerTo(['.upText', '.downText'], 1, {
// x:this.target._gsTransform.x,
cycle: {
attr: [{
x: this.target._gsTransform.x + 146
}]
},
ease: Elastic.easeOut.config(1, 0.4)
}, '0.02')
}
TweenMax.to(dragger, 1, {
x: 30,
onUpdate: dragUpdate,
ease: Power1.easeInOut
})
var formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
});
.container {
width: 600px;
height: 300px;
margin-left: 0px;
margin-top: 0px;
}
svg {
width: 100%;
height:100%;
visibility: hidden;
}
.upText,
.downText {
text-anchor: middle;
font-weight: 300;
font-size: 172px;
fill: #ffffff;
color: black;
user-select: none;
-webkit-user-select: none;
pointer-events: none;
text-rendering: optimizeSpeed;
margin-left: 10px;
margin-top: 0px;
line-height: 140px;
}
.upText {
font-size: 22px;
font-family: IntCircular-Medium;
letter-spacing: -0.5px;
}
#dragger{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.downText {
letter-spacing: -0.4px;
font-family: IntCircular-Thin;
}<div class="downText" id="downText">100</div>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="100 222 400 250">
<defs>
<filter id="goo" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="cm"/>
</filter>
</defs>
<g id="dragGroup">
<path id="dragBar" fill="#ff9600" d="M447 299.5c0 1.4-1.1 2.5-2.5 2.5h-296c-1.4 0-2.5-1.1-2.5-2.5l0 0c0-1.4 1.1-2.5 2.5-2.5h296C445.9 297 447 298.1 447 299.5L447 299.5z"/>
<g id="displayGroup">
<g id="gooGroup" filter="url(#goo)">
<circle id="display" fill="#ffab18" cx="146" cy="299.5" r="13"/>
<circle id="dragger" fill="#ffab18" stroke="#ff6600" stroke-width="0" cx="146" cy="299.5" r="13"/>
</g>
<text class="upText" x="145" y="266"/>
</g>
</g>
</svg>
</div>
<div class="perYear" id="perYear"></div> The div id above is "perYear" and its number is formed by taking the contents of the div "downText" and multiplying by 18.4<br><br>
<div class="perTwentyFive" id="perTwentyFive"></div> The div id above is "perTwentyFive" and its number is formed by taking the contents of the div "downText" and multiplying by 460<br><br>
<div class="perMonthCoal" id="perMonthCoal"></div> The div id above is "perMonthCoal" and its number is formed by taking the contents of the div "downText" and multiplying by 1<br><br>
<div class="perMonthSolar" id="perMonthSolar"></div> The div id above is "perMonthSolar" and its number is formed by taking the contents of the div "downText" and multiplying by 0.79
<script src='http://vibralifeusa.com/slider-test/1.js' type='text/javascript'></script>
<script src='http://vibralifeusa.com/slider-test/2.js' type='text/javascript'></script>