jQuery closeest() и find()

Я пытаюсь найти способ выбрать только один калькулятор за раз, используя функции jQuery поперечные функции nearest() и find(). В текущем состоянии при нажатии кнопки он будет использовать оба калькулятора. Мне нужно, чтобы он использовал только один калькулятор за раз. Нужна помощь. Правильно ли размещен html? Я знаю, что со многими учебниками по DOM Traversing они используют ul и li, должен ли я здесь?jQuery closeest() и 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.

Обратитесь к этому примеру, чтобы понять ход дома.

<!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(), чтобы получить элемент в постион х [0, длина-1]

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

источник

2016-07-28 04:54:20 madalinivascu

jQuery closeest() и find()

ответ

Смежные вопросы