使用 jquery 使用两个输入单选按钮和 href 实时求和

Question

我想对按钮和 href 的 2 个输入求和。这是我的代码

这是 HTML 代码

  <a id="add1" class="thumbnail"  alt="100000" href="">one</a>
    <br>
  <a id="add1" class="thumbnail"  alt="150000" href="">two</a>
    <br>
  <a id="add1" class="thumbnail"  alt="90000" href="">theree</a>

<hr>
<hr>
<input class="add2" type="radio" value="1" alt="100000" name="material">
LACE
<br>
<input class="add2" type="radio" value="2" alt="200000" name="material">
LACE - LEATHER
<br>
<input class="add2" type="radio" value="3" alt="150000" name="material">
LACE - SUEDE
<br>
<hr>
<hr>
<img src="" alt="0" id="mainImage" class="pret">
<div id="cau"  alt="0"class="pret"></div>
<div id="usertotal"> PRICE  :  IDR  0</div>

这是 Jquery

<script type="text/javascript">
    $(document).ready(function() {
        $('.thumbnail').live("click", function() {
            var g = $(this).attr('alt');
            var e = $(this).attr('href');
            calculateSum();
            $('#mainImage').hide();
            $('#mainImage').html('<img class="pret" alt="'+g+'" src="'+e+'">').fadeIn();
            return false; 
        });

        $('.add2:checked').change(function(){ 
            var m = $(this).attr('alt');
            var a = $(this).attr('value');
            alert(m);
            calculateSum();
            $('#cau').hide();
            $('#cau').html('<div name="'+a+'" class="pret" alt="'+m+'"></div>').fadeIn();
            return false; 
        });

    });
    function calculateSum() {
        var sum = 0;
        $(".pret").each(function() {
            sum += parseFloat($(this).attr('alt'));
        });
        $('#usertotal').html('PRICE : IDR  '+ sum);
    }
</script>

问题是：为什么我的代码运行这么慢？我必须点击2次才能求和吗？我希望它一键运行。

感谢您的回答:) 问候

Answer 1

我发现你的代码有很多问题，所以我不知道是什么导致了你的问题。

首先：您的 alt 属性和 class 属性之间需要一个空格，例如：

<div id="cau" alt="0" class="pret"></div>

其次：

$('#mainImage').html('<img class="pret" alt="'+g+'" src="'+e+'">').fadeIn();

这甚至不应该正常工作，因为您不能将 html “放入”图像元素中（#mainImage 毕竟是 <img /> 元素）。

第三：

$('.add2:checked').change(function(){

这不应该对您发布的代码做任何事情，因为没有在页面加载时检查类 .add2 的元素。因此，这个处理程序永远不会做任何事情。