jqueryイベントのキーを押すか押すと正常に機能する機能があります。しかし、別の関数から同じ関数を呼び出していると機能しません。このように、加算内で乗算関数を呼び出します。
function add(){
multiply();
}
JavaScript:
$(function(){
var input = $('.input'),
bar = $('.bar'),
bw = bar.width(),
percent = bar.find('.percent'),
ps = percent.find('span'),
name = 'rotate';
input.on('keydown', function(e){
if (e.keyCode == 13){
var t = $(this), val = t.val();
if (val >=0 && val <= 100){
var w = 100-val, pw = (bw*w)/100,
pa = {
height: w+'%'
},
cw = (bw-pw)/2,
ca = {
left: cw
}
ps.animate(pa);
cs.text(val+'%');
circle.animate(ca, function(){
circle.removeClass(name)
}).addClass(name);
} else {
alert('range: 0 - 100');
t.val('');
}
}
});
});
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal bar graph with CSS3 and jQuery</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
<script src="slider_scripts/cal_impact_on_clinic.js"></script>
<style>
#sliderValue140h{ position:absolute;
margin:0px 0px 0px 330px;
font-family: Myriad Pro,Normal,strong;
font-size: 16px;
border:none;
background-color:transparent;
color:#000;
}
#sliderValue150h{ position:absolute;
margin:0px 0px 0px 330px;
font-family: Myriad Pro,Normal,strong;
font-size: 16px;
border:none;
background-color:transparent;
color:#000;
}
#sliderValue160h{ position:absolute;
margin:0px 0px 0px 330px;
font-family: Myriad Pro,Normal,strong;
font-size: 16px;
border:none;
background-color:transparent;
color:#000;
}
</style>
<script language="JavaScript" src="slider_scripts/slider.js"></script>
</head>
<body>
<form action="#" method="get" name="demoForm" id="slider">
<div id="sliderimpact2_slide2" ontouchmove="calc(),put_zero();">
<input name="sliderValue" type="Text" id="sliderValue140h" onChange="A_SLIDERS[5].f_setValue(this.value)" value="5" size="3" readonly>
<script language="JavaScript">
var A_TPLh140h = {
'b_vertical' : false,
'b_watch': true,
'n_controlWidth': 356,
'n_controlHeight': 29,
'n_sliderWidth': 32,
'n_sliderHeight': 33,
'n_pathLeft' : -5,
'n_pathTop' : -8,
'n_pathLength' :340,
's_imgControl': 'images/slide5slider.png',
's_imgSlider': 'images/Slider Circle 2.png',
'n_zIndex': 1
}
var A_INITh140h = {
's_form' : 0,
's_name': 'sliderValue140h',
'n_minValue' : 0,
'n_maxValue' : 100,
'n_value' : 0,
'n_step' : 5,
}
new slider(A_INITh140h, A_TPLh140h);
</script>
</div>
<br />
<br />
<div id="sliderimpact2_slide2" ontouchmove="calc(),put_zero();">
<input name="sliderValue" type="Text" id="sliderValue150h" onChange="A_SLIDERS[5].f_setValue(this.value)" value="5" size="3" readonly>
<script language="JavaScript">
var A_TPLh150h = {
'b_vertical' : false,
'b_watch': true,
'n_controlWidth': 356,
'n_controlHeight': 29,
'n_sliderWidth': 32,
'n_sliderHeight': 33,
'n_pathLeft' : -5,
'n_pathTop' : -8,
'n_pathLength' :340,
's_imgControl': 'images/slide5slider.png',
's_imgSlider': 'images/Slider Circle 2.png',
'n_zIndex': 1
}
var A_INITh150h = {
's_form' : 0,
's_name': 'sliderValue150h',
'n_minValue' : 0,
'n_maxValue' : 100,
'n_value' : 0,
'n_step' : 5,
}
new slider(A_INITh150h, A_TPLh150h);
</script>
</div>
<br />
<br />
<div id="sliderimpact2_slide2" ontouchmove="calc(),put_zero();">
<input name="sliderValue" type="Text" id="sliderValue160h" onChange="A_SLIDERS[5].f_setValue(this.value)" value="5" size="3" readonly>
<script language="JavaScript">
var A_TPLh160h = {
'b_vertical' : false,
'b_watch': true,
'n_controlWidth': 356,
'n_controlHeight': 29,
'n_sliderWidth': 32,
'n_sliderHeight': 33,
'n_pathLeft' : -5,
'n_pathTop' : -8,
'n_pathLength' :340,
's_imgControl': 'images/slide5slider.png',
's_imgSlider': 'images/Slider Circle 2.png',
'n_zIndex': 1
}
var A_INITh160h = {
's_form' : 0,
's_name': 'sliderValue160h',
'n_minValue' : 0,
'n_maxValue' : 100,
'n_value' : 0,
'n_step' : 5,
}
new slider(A_INITh160h, A_TPLh160h);
</script>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img src="images/Show Impact.png" onclick="slidercalsevere();">
<div class="wrap">
<div class="bar">
<div class="percent">
<span style="width: 100%;"></span>
</div>
</div>
<div class="text">
<input type="text" class="input" value="0" id="sliderValue170h"/>
</div>
</div>
</form>
</body>
</html>
ここに別のhtmlファイルのみがあります
ここにスクリプトファイルがあります