jQuery NÃ¤chstes() und Find()

Ich versuche, einen Weg zu finden, nur einen Rechner auf einmal zu waehlen, indem ich jQuery Querfunktionen nÃ¤chsten() und find() benutze. Im aktuellen Zustand werden beim Drücken einer Taste beide Rechner verwendet. Ich brauche es nur einen Rechner gleichzeitig zu verwenden. Hilfe benötigen. Ist der HTML-Code korrekt angelegt? Ich weiß, dass mit vielen Tutorials auf DOM Traversing sie ul und li verwenden, sollte ich hier?jQuery NÃ¤chstes() und 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"); 

});

Quelle

2016-07-28 Sam

'$ (this) .closest (Knopf) .find (" beantworten") "Ist das das, worauf du beziehst? Was ist dieser Kontext?" auch was ist Knopf? .answer sollte Kind des Knopfes sein und dieses sollte Eltern des Knopfes sein – guradio

von dem, was ich Ihnen Code sagen kann, ist in keinem Fall – madalinivascu

Es ist nicht zwingend ul, li zu benutzen.

Siehe dieses Beispiel, um den dom traverse zu verstehen.

<!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>

Entfernen Sie die kommentierte console.log() einzeln und verstehen Sie den Prozess.

Quelle

2016-07-28 04:41:00

Verwenden first() bekommt die ersten oder eq() das Element an Postion bekommen x [0, Länge-1]

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

Quelle

2016-07-28 04:54:20 madalinivascu

Antwort

Verwandte Themen