Question

我有问题从3个方框中获取不同的工具提示值。当我单击第一个框和第二个框时，工具提示上的值不会改变.. 总是从第三个盒子里获得价值，那么如何从盒子里获得不同的价值？

<!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>

Answer 1

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>

工具提示值始终获得相同的值

1 个答案: