Question

我试图找出一种方法，通过使用jQuery横向函数nearest（）和find（）一次只选择一个计算器。在按下按钮的当前状态下，它将使用两个计算器。我需要它一次只使用一个计算器。需要一些帮助。 HTML是否正确布局？我知道有很多关于DOM Traversing的教程他们使用ul和li，我应该在这里吗？

的index.html

<!DOCTYPE html>
<html>
<head>
<title>Calculator App</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div class="calcWrap">
        <h2>Calculator One</h2>
        <div action="" class="calculator">
                <input type="text" class="answer" value="" disabled="disabled"/><br>
                <button type="button" class="number 1" value="1">1</button>
                <button type="button" class="number 2" value="2">2</button>
                <button type="button" class="number 3" value="3">3</button>
                <button type="button" class="symbol /" value="/">/</button <br>
                <button type="button" class="number 4" value="4">4</button>
                <button type="button" class="number 5" value="5">5</button>
                <button type="button" class="number 6" value="6" >6</button>
                <button type="button" class="symbol *" value="*">*</button><br>
                <button type="button" class="number 7" value="7">7</button>
                <button type="button" class="number 8" value="8">8</button>
                <button type="button" class="number 9" value="9">9</button>
                <button type="button" class="symbol -" value="-">-</button><br>
                <button type="button" class="number 0" value="0" >0</button>
                <button type="button" class="number ." value=".">.</button>
                <button type="button" class="C" value="C">C</button>
                <button type="button" class="symbol +" value="+">+</button><br>
                <button type="button" class="equals =">=</button>
        </div>
        <br />
        <br />
        <h2>Calculator One</h2>
        <div action="" class="calculator">
                <input type="text" class="answer" value="" disabled="disabled"/><br>
                <button type="button" class="number 1" value="1">1</button>
                <button type="button" class="number 2" value="2">2</button>
                <button type="button" class="number 3" value="3">3</button>
                <button type="button" class="symbol /" value="/">/</button><br>
                <button type="button" class="number 4" value="4">4</button>
                <button type="button" class="number 5" value="5">5</button>
                <button type="button" class="number 6" value="6" >6</button>
                <button type="button" class="symbol *" value="*">*</button><br>
                <button type="button" class="number 7" value="7">7</button>
                <button type="button" class="number 8" value="8">8</button>
                <button type="button" class="number 9" value="9">9</button>
                <button type="button" class="symbol -" value="-">-</button><br>
                <button type="button" class="number 0" value="0" >0</button>
                <button type="button" class="number ." value=".">.</button>
                <button type="button" class="C" value="C">C</button>
                <button type="button" class="symbol +" value="+">+</button><br>
                <button type="button" class="equals =">=</button>
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

styles.css的

 body {
margin-left: auto;
margin-right: auto;
background-color: lightgray;
}

html {
font-size: 1vw;
}

h2 {
font-size: 2rem;
color: white;
}

.calcWrap {
width: 43rem;
margin-right: auto;
margin-left: auto;
padding: 2rem;
margin-top: 10rem;
border: 0.3rem solid black;
border-radius: 1.5rem;
background-color: #3E7CB1;
}

li {
float: left;
}

.answer {
width: 43rem;
height: 12rem;
background-color: lightgray;
font-size: 4rem;
text-align: right;
font-weight: lighter;
padding: 2rem;
margin-bottom: 1rem;
border-radius: 0.5rem;
box-sizing: border-box;
}

.number {
width: 10.5rem;
height: 10.5rem;
background-color: #DBD5B5;
margin-top: 0.5rem;
color: black;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
}

.symbol {
width: 10.5rem;
height: 10.5rem;
background-color: #FCAB10;
margin-top: 0.5rem;
color: black;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
} 

.C {
width: 10.5rem;
height: 10.5rem;
background-color: #F8333C;
margin-top: 0.5rem;
color: #E4FDE1;
font-size: 4rem;
border-radius: 1rem;
font-weight: bold;
} 

.equals {
width: 43rem;
height: 10rem;
background-color: #44AF69;
margin-top: 5px;
font-size: 6rem;
color: white;
border-radius: 1rem;
font-weight: bold;
}

scripts.js中

$(document).ready(function() {
var numberOne;
var numberTwo;
var operator;
var $result = $(".answer");

function reset() {
    numberOne = null;
    numberTwo = null;
    operator = null;
    $result.val("");
}

reset();

$(".number").click(function() {
    var clickDigit = $(this).text();
    var currentVal = $result.val();
    var newVal;
    if(currentVal === "") {
        newVal = clickDigit;
    } else {
        newVal = currentVal + clickDigit;
    }
    $result.val(newVal);
});

$(".symbol").click(function() {
    operator = $(this).text();
    numberOne = parseFloat($result.val());
    $result.val("");
});

$(".equals").click(function() {

    var total;

    numberTwo = parseFloat($result.val());

    if(operator === "+") {
        total = numberOne + numberTwo;
    } 
    else if (operator === "-") {
        total = numberOne - numberTwo;
    }
    else if (operator === "/") {
        total = numberOne / numberTwo;
    }
    else if (operator === "*") {
        total = numberOne * numberTwo;
    }

    $result.val(total);

});

$(".C").click(function() {
    reset();
});

$(this).closest(button).find(".answer");

});

Answer 1

使用ul，li不是强制性的。

参考此示例以了解dom遍历。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
    $(document).ready(function(){
        //console.log($('.fourth').parent().attr('class'));

        //console.log($('.fourth').closest('.second').html());

        //console.log($('#d1').find('span').html());

        //console.log($('#d1').next('p').html());
    });
    </script>
</head>
<body>
    <div class="first">
      <div class="second">
        <div class="third">
          <div class="fourth"></div>
        </div>
    </div>

    <div id="d1">
        <span>1</span>
    </div>
    <p>Paragraph</p>
    <div id="d2">
        <span>2</span>
    </div>
    <div id="d3">
        <span>3</span>
    </div>
</div>
</body>
</html>

逐个删除已注释的console.log（），并了解该过程。

Answer 2

使用first()获取第一个或eq()获取元素位置x [0，length-1]

$(this).closest(button).find(".answer").first();

jQuery nearest（）和find（）

2 个答案: