jQuery closest（）とfind（）

jQueryの横関数nearest（）とfind（）を使用して、一度に1つの電卓だけを選択する方法を見つけようとしています。現在の状態でボタンを押すと、両方の電卓が使用されます。私は一度に1つの電卓だけを使用する必要があります。助けが要る。 htmlは正しくレイアウトされていますか？私はDOM Traversingに関する多くのチュートリアルでulとliを使用していることを知っています。jQuery closest（）とfind（）

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 traverseについては、この例を参照してください。

<!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（）を1つずつ削除して、プロセスを理解してください。

出典

2016-07-28 04:41:00

使用first()最初またはeq()はpostionのx [0、長さ-1]にある要素を取得するために取得する

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

出典

2016-07-28 04:54:20 madalinivascu

jQuery closest（）とfind（）

答えて

関連する問題