单击相同的元素但需要不同的变量/值？

时间：2015-03-04 16:36:00

标签： javascript jquery html css

我试图做一个计算器，每次点击同一个班级的不同div时，我都希望能够得到不同的值。例如，

$('.numbers').click(function () {
    $('#result').append('<span class ="append">' + $(this).text() + '</span>');
    a = +$('.append').text();
});

我想做同样的事情，但得到不同的价值，所以我可以将它设置为var b。

现在，我得到两次出现的相同值。有什么想法吗？

我的工作Jsfiddle

此外，现在，每当我点击数字1时，由于某种原因它都没有转换为数字。其他数字也不错。

更新

有没有人足够聪明地帮助我解决这个问题？！我不想先做阵列。第二关，我知道为什么它显示两倍的数字。我希望它在第一次点击时停止，将该值保存到var a。然后第二次单击将显示新值并将其保存到var b。

这是一个不需要做数组的人。

https://github.com/meherchandan/Calculator/blob/master/calculator.js

5 个答案:

答案 0 :(得分：1)

忘记我之前的回答。问题是你有两个相同的功能。删除第一个。

此处：http://jsfiddle.net/y4jxvxub/9/

示例：

＆＃13;
＆＃13; 
    $(document).ready(function () {
    
        $('.numbers').click(function () {
            $('#result').append('<span class ="append">' + $(this).text() + '</span>');
            a = +$('.append').text();
    
        });
        
        $('.operators').click(function () {
            switch ($(this).text()) {
                case '+':
                    result = a + b;
                    break;
                case '-':
                    result = a - b;
                    break;
                case 'x':
                    result = a * b;
                    break;
                case '÷':
                    result = a / b;
                    break;
                case '=':
                    $('.append').remove();
                    $('#result').append('<span class="append">' + result + '</span>');
            }
        });
        $('#clear').click(function () {
            $('.append').remove();
        });
    });
＆＃13; 
.head {
    height: 125px;
    width: 130px;
    background: #9e532a;
    border-radius: 100%;
    margin: 20px auto;
    position: relative;
    border: 5px solid #63341a;
}
.eyes {
    height: 20px;
    width: 13px;
    background: black;
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    top: 40px;
}
.ears {
    height: 40px;
    width: 40px;
    background: #9e532a;
    border-radius: 100%;
    border: 10px solid #63341a;
    top: -10px;
    z-index: -1;
    position: absolute;
    display: inline-block;
}
.left_ear {
    left: -20px;
}
.left_ear:after {
    content:"";
    height: 20px;
    width: 20px;
    background: white;
    position: absolute;
    border-radius: 100%;
    left: 10px;
    top: 10px;
}
.right_ear:after {
    content:"";
    height: 20px;
    width: 20px;
    background: white;
    position: absolute;
    border-radius: 100%;
    left: 10px;
    top: 10px;
}
.right_ear {
    right: -20px;
}
.right_eye {
    right: 30px
}
.left_eye {
    left: 30px;
}
.nose {
    height: 20px;
    width: 30px;
    background: #63341a;
    position: absolute;
    top: 70px;
    left: 49px;
    border-radius: 60%;
}
.nose_bridge {
    height: 15px;
    width: 3px;
    background: black;
    position: absolute;
    top: 20px;
    left: 13px;
}
.mouth {
    width: 60px;
    height: 10px;
    position: absolute;
    top: 90px;
    left: 33px;
    border-bottom: 5px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-radius: 0 0 50px 50px;
}
.body {
    height: 450px;
    width: 300px;
    background: #63341a;
    position: absolute;
    top: 120px;
    left: -85px;
    z-index: -1;
}
.head:before {
    content:"";
    width: 400px;
    height: 40px;
    background: #63341a;
    position: absolute;
    top: 100px;
    z-index:-1;
    border-radius: 100%;
    left: -130px;
}
.body:after {
    content:"";
    height: 50px;
    width: 60px;
    background: #63341a;
    position: absolute;
    bottom: -50px;
    right: 0;
    border-radius: 0 0 30px 30px;
}
.body:before {
    content:"";
    height: 50px;
    width: 60px;
    background: #63341a;
    position: absolute;
    bottom: -50px;
    left: 0;
    border-radius: 0 0 30px 30px;
}
#result {
    height: 50px;
    width: 248px;
    background: white;
    position: absolute;
    top: 30px;
    left: 25px;
    box-shadow: 1px 1px 10px 1px black;
    line-height: 50px;
    font-size: 30px;
}
#calculator {
    width: 248px;
    position: absolute;
    top: 100px;
    left: 24px;
    border-left: 1px solid black;
    border-top: 1px solid black;
}
.numbers {
    width: 61px;
    height: 62px;
    background: #D8D6D6;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    text-align: center;
    font-size: 30px;
    line-height: 62px;
}
.numbers:hover {
    background: #DDD2BE;
}
.operators {
    background: #F27B17;
    width: 61px;
    height: 62px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    text-align: center;
    font-size: 30px;
    line-height: 62px;
}
.operators:hover {
    background: orange;
}
/*#split {
  width: 61px;
  height: 62px;
  background: #D8D6D6;
  border-right: 1px  solid black;
  border-bottom: 1px  solid black;
  float: left;
  text-align: center;
  font-size: 30px;
  line-height: 62px;
}
 .append {
    float: right;
}*/
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
        <div class="head">
            <div class="left_ear ears"></div>
            <div class="right_ear ears"></div>
            <div class="left_eye eyes"></div>
            <div class="right_eye eyes"></div>
            <div class="nose">
                <div class="nose_bridge"></div>
            </div>
            <div class="mouth"></div>
            <div class="body">
                <div id="result"></div>
                <div id="calculator">
                    <div class="numbers" id="n1"><span>1</span>

                    </div>
                    <div class="numbers" id="n2">2</div>
                    <div class="numbers" id="n3">3</div>
                    <div class="operators" id="add">+</div>
                    <div class="numbers" id="n4">4</div>
                    <div class="numbers" id="n5">5</div>
                    <div class="numbers" id="n6">6</div>
                    <div class="operators" id="minus">-</div>
                    <div class="numbers" id="n7">7</div>
                    <div class="numbers" id="n8">8</div>
                    <div class="numbers" id="n9">9</div>
                    <div class="operators" id="multiply">x</div>
                    <div class="numbers" style="width: 123px" id="n0">0</div>
                    <div class="numbers split">.</div>
                    <div class="operators" id="divide">÷</div>
                    <div class="numbers" style="width:185px" id="clear">CLEAR</div>
                    <div class="operators equal">=</div>
                </div>
            </div>
        </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个。 http://jsfiddle.net/y4jxvxub/11/ 

$(document).ready(function () {
    var a ;
    var b ;
    var result;
    $('.numbers').click(function () {
        $('#result').append('<span class ="append">' + $(this).text() + '</span>');
        if(a==undefined){
            a = parseInt($(this).text());
        } else {
            b = parseInt($(this).text());
        }
    });

    $('.operators').click(function () {
        switch ($(this).text()) {
            case '+':
                result = a + b;
                break;
            case '-':
                result = a - b;
                break;
            case 'x':
                result = a * b;
                break;
            case '÷':
                result = a / b;
                break;
            case '=':
                 $('.append').remove();
                $('#result').append('<span class="append">' + result + '</span>');
        }
    });
    $('#clear').click(function () {
        $('.append').remove();
    });
});

您可以尝试对代码进行一些小改动。您必须先选择2个单位数字，然后选择运算符，然后选择“=”。

答案 2 :(得分：0)

没有数组的工作代码，我稍微调整了一下代码，因为<span class="append"></span>不是必需的。 http://jsfiddle.net/y4jxvxub/15/

答案 3 :(得分：0)

作为普通计算器工作： http://jsfiddle.net/y4jxvxub/45/ 

$(document).ready(function () {
    var number=0, buffer="", result=0, operator="";
    
    $('.numbers').click(function () {
        $('#result').text($('#result').text() + $(this).text());
        buffer = buffer + $(this).text();
    });

    $('.operators').click(function () {

        number = parseFloat(buffer);
        buffer = "";

        switch (operator) {
            case '+':
                number = result + number;
                break;
            case '-':
                number = result - number;
                break;
            case 'x':
                number = result * number;
                break;
            case '÷':
                number = result / number;
                break;
        }
        operator = $(this).text();     
        result = number;
        
        $('#result').text($('#result').text() + operator);
        if ($(this).text()=='=') {
            buffer = result;
            $('#result').text(result);
        }
    });

    $('#clear').click(function () {
        number=0, buffer="", result=0, operator="";
        $('#result').text("");
    });
});

答案 4 :(得分：0)

我的小调整，这只适用于简单的数学运算......你需要花更多的时间来处理复杂的情况：1 + 3 + 3 ...... 希望这有帮助！

＆＃13;
＆＃13; 
$(document).ready(function () {
    $.screen = $('#result');
    
    var a,c;
    $('.numbers').click(function () {
        $('#result').append('<span class ="append">' + $(this).text() + '</span>');
        b = +$('.append').text();        
    });
   
    $('.operators').click(function () {
        switch ($(this).text()) {
            case '+':
                operator='+';
                a = parseInt(b);
                $.screen.text('');  
                break;
            case '-':
                operator='-';
                a = parseInt(b);
                $.screen.text('');  
                break;
            case 'x':
                operator='*';
                a = parseInt(b);
                $.screen.text('');  
                break;
            case '÷':
                operator='/';
                a = parseInt(b);
                $.screen.text('');  
                break;
            case '=':
                c= parseInt(b);
                $.screen.text(''); 
                if(operator=='+'){
                    $.screen.text(a+c);
                }else if(operator=='-'){
                    $.screen.text(a-c);
                }else if(operator=='*'){
                    $.screen.text(a*c);
                }else if(operator=='/'){
                    $.screen.text(a/c);                 
                }
                
        }
    });
    $('#clear').click(function () {
        $('#result').empty();
            
    });
});
＆＃13; 
.head {
    height: 125px;
    width: 130px;
    background: #9e532a;
    border-radius: 100%;
    margin: 20px auto;
    position: relative;
    border: 5px solid #63341a;
}
.eyes {
    height: 20px;
    width: 13px;
    background: black;
    border-radius: 100%;
    display: inline-block;
    position: absolute;
    top: 40px;
}
.ears {
    height: 40px;
    width: 40px;
    background: #9e532a;
    border-radius: 100%;
    border: 10px solid #63341a;
    top: -10px;
    z-index: -1;
    position: absolute;
    display: inline-block;
}
.left_ear {
    left: -20px;
}
.left_ear:after {
    content:"";
    height: 20px;
    width: 20px;
    background: white;
    position: absolute;
    border-radius: 100%;
    left: 10px;
    top: 10px;
}
.right_ear:after {
    content:"";
    height: 20px;
    width: 20px;
    background: white;
    position: absolute;
    border-radius: 100%;
    left: 10px;
    top: 10px;
}
.right_ear {
    right: -20px;
}
.right_eye {
    right: 30px
}
.left_eye {
    left: 30px;
}
.nose {
    height: 20px;
    width: 30px;
    background: #63341a;
    position: absolute;
    top: 70px;
    left: 49px;
    border-radius: 60%;
}
.nose_bridge {
    height: 15px;
    width: 3px;
    background: black;
    position: absolute;
    top: 20px;
    left: 13px;
}
.mouth {
    width: 60px;
    height: 10px;
    position: absolute;
    top: 90px;
    left: 33px;
    border-bottom: 5px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-radius: 0 0 50px 50px;
}
.body {
    height: 450px;
    width: 300px;
    background: #63341a;
    position: absolute;
    top: 120px;
    left: -85px;
    z-index: -1;
}
.head:before {
    content:"";
    width: 400px;
    height: 40px;
    background: #63341a;
    position: absolute;
    top: 100px;
    z-index:-1;
    border-radius: 100%;
    left: -130px;
}
.body:after {
    content:"";
    height: 50px;
    width: 60px;
    background: #63341a;
    position: absolute;
    bottom: -50px;
    right: 0;
    border-radius: 0 0 30px 30px;
}
.body:before {
    content:"";
    height: 50px;
    width: 60px;
    background: #63341a;
    position: absolute;
    bottom: -50px;
    left: 0;
    border-radius: 0 0 30px 30px;
}
#result {
    height: 50px;
    width: 248px;
    background: white;
    position: absolute;
    top: 30px;
    left: 25px;
    box-shadow: 1px 1px 10px 1px black;
    line-height: 50px;
    font-size: 30px;
}
#calculator {
    width: 248px;
    position: absolute;
    top: 100px;
    left: 24px;
    border-left: 1px solid black;
    border-top: 1px solid black;
}
.numbers {
    width: 61px;
    height: 62px;
    background: #D8D6D6;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    text-align: center;
    font-size: 30px;
    line-height: 62px;
}
.numbers:hover {
    background: #DDD2BE;
}
.operators {
    background: #F27B17;
    width: 61px;
    height: 62px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    float: left;
    text-align: center;
    font-size: 30px;
    line-height: 62px;
}
.operators:hover {
    background: orange;
}
/*#split {
  width: 61px;
  height: 62px;
  background: #D8D6D6;
  border-right: 1px  solid black;
  border-bottom: 1px  solid black;
  float: left;
  text-align: center;
  font-size: 30px;
  line-height: 62px;
}
 .append {
    float: right;
}*/
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<body>
    <div id="container">
        <div class="head">
            <div class="left_ear ears"></div>
            <div class="right_ear ears"></div>
            <div class="left_eye eyes"></div>
            <div class="right_eye eyes"></div>
            <div class="nose">
                <div class="nose_bridge"></div>
            </div>
            <div class="mouth"></div>
            <div class="body">
                <div id="result"></div>
                <div id="calculator">
                    <div class="numbers" id="n1">1</div>
                    <div class="numbers" id="n2">2</div>
                    <div class="numbers" id="n3">3</div>
                    <div class="operators" id="add">+</div>
                    <div class="numbers" id="n4">4</div>
                    <div class="numbers" id="n5">5</div>
                    <div class="numbers" id="n6">6</div>
                    <div class="operators" id="minus">-</div>
                    <div class="numbers" id="n7">7</div>
                    <div class="numbers" id="n8">8</div>
                    <div class="numbers" id="n9">9</div>
                    <div class="operators" id="multiply">x</div>
                    <div class="numbers" style="width: 123px" id="n0">0</div>
                    <div class="numbers split">.</div>
                    <div class="operators" id="divide">÷</div>
                    <div class="numbers" style="width:185px" id="clear">CLEAR</div>
                    <div class="operators equal">=</div>
                </div>
            </div>
        </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题