jQuery最接近（）和发现（）

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

的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"); 

});

来源

2016-07-28 Sam

'$（这）.closest（按钮）.find（ “回答”） ;'这是你所指的？这是什么情况？还有什么是按钮？ .answer应该是按钮的子项，并且这应该是按钮 – guradio

的父项，从我可以告诉你的代码到问题不在任何事件中 – madalinivascu

不强制使用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（）并理解过程。

来源

2016-07-28 04:41:00

使用first()获得第一或eq()在现在的位置是X获得元素[0，长度-1]

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

来源

2016-07-28 04:54:20 madalinivascu

jQuery最接近（）和发现（）

回答

相关问题