Javascript 工具提示值始终获得相同的值
我无法从3个框中获取不同的工具提示值。 单击第一个框和第二个框时，工具提示上的值不会更改。。 它总是从第三个框中获取值， 那么如何从框中获得不同的值呢Javascript 工具提示值始终获得相同的值,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我无法从3个框中获取不同的工具提示值。 单击第一个框和第二个框时，工具提示上的值不会更改。。 它总是从第三个框中获取值， 那么如何从框中获得不同的值呢 <!DOCTYPE html> <html> <head> <title>ToolTip</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery
<!DOCTYPE html>
<html>
<head>
<title>ToolTip</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://k-blogger.googlecode.com/files/JQuery.easing.1.3.js"></script>
<style type="text/css" media="screen">
body {
font-family: Arial;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
}
.activator {
background: #0099ff;
width: 100px;
height: 100px;
padding: 20px;
cursor: pointer;
}
.tip-item {
position: relative;
}
.tip {
display: none;
background: red;
padding: 5px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 1px 1px 5px #000;
-moz-box-shadow: 1px 1px 5px #000;
-webkit-box-shadow: 1px 1px 5px #999;
}
</style>
<script type="text/javascript">
<!--
(function($){
$.fn.BAToolTip = function(options) {
//set up default options
var defaults = {
tipClass: 'tip', //the class name for your tip
tipFadeEasing: 'easeOutQuint', //easing method
tipFadeDuration: 200, //fade duration
tipOpacity: 1, //opacity of tip when mouseover
tipOffset: 10 //offset the tip relative to mouse cursor in pixels
};
var opts = $.extend({}, defaults, options);
return this.each(function() {
var $this = $(this);
$this.mousemove(function(e){
var parentElementOffset = $this.parent().offset();
var xPos = e.pageX - parentElementOffset.left;
var yPos = e.pageY - parentElementOffset.top;
$(this).parent().find('.'+opts.tipClass).css({'top': yPos+opts.tipOffset, 'left' : xPos+opts.tipOffset});
$(this).parent().find('.'+opts.tipClass).css('display', 'block').stop().animate({opacity:opts.tipOpacity},{duration:opts.tipFadeDuration, easing: opts.tipFadeEasing});
})
$this.mouseout(function(){
$('.'+opts.tipClass).stop().animate({opacity:0},{duration:opts.tipFadeDuration, easing: opts.tipFadeEasing, complete: function(){ $(this).css('display', 'none') } });
})
});
};
})(jQuery);
function showValue(a){
var fom = document.test
var totalall = eval("fom.totalall"+a);
var aaa = document.getElementById("total"+a);
totalall.value = Math.abs(totalall.value.replace(/\./g,"")) + 1;
aaa.innerHTML = totalall.value;
}
//-->
</script>
</head>
<body>
<form name="test">
<div class="tip-item">
<?php for($i=1;$i<=3;$i++){ ?>
<div id="activator<?php echo $i; ?>" class="activator tip-specific-class" onclick="showValue(<?php echo $i; ?>);">
<div class="tip tip-specific-class">
<p id="total<?php echo $i; ?>">0</p>
<input type="hidden" name="totalall<?php echo $i; ?>" value=0>
</div>
</div>
<br>
<?php } ?>
</div>
</form>
<script type="text/javascript">
jQuery(function(){
jQuery('.activator.tip-specific-class').BAToolTip({
tipOpacity: 0.9,
tipOffset: 20
});
});
</script>
</body>
</html>
willcooler，我觉得问题出在你的回路上。请用以下表格代码替换您的表格。我相信它会解决你的问题
<form name="test">
<?php for($i=1;$i<=3;$i++){ ?>
<div class="tip-item">
<div id="activator<?php echo $i; ?>" class="activator tip-specific-class" onclick="showValue(<?php echo $i; ?>);">
<div class="tip tip-specific-class">
<p id="total<?php echo $i; ?>"><?php echo $i; ?> test</p>
<input type="hidden" name="totalall<?php echo $i; ?>" value=0>
</div>
</div>
<br>
</div>
<?php } ?>
</form>
请尝试给出一个关于你的问题的最简单的工作示例。例如，如果这是您遇到的前端问题，则无需打印所有php文件code@leo共有3个框，然后可以单击这些框并显示总计的值。问题是，当我单击第一个框和第二个框时，工具提示的值不会更改，但是如果我单击第三个框，值会更改，然后如果我将鼠标悬停到第一个框和第二个框，工具提示值将显示第三个框工具提示的值。我理解，我的意思是，在你的问题中包含代码中的所有后端内容会让任何试图帮助你的人更难阅读！如果用实际呈现的HTML替换php代码，think将更清晰