显示和隐藏元素

Question

在下面的代码中，我的想法是当我点击表格字段时，显示一个输入，并输入值乘以相应的数字。一切正常，但是当我试图改变数字（再次访问输入）时，这就是没有发生。输入现在再次显示。

$(document).ready(function() {
  $('.showInput').on('click', function() {
    let input = $(this).attr('data-style')
    $('#' + input).toggle().focus()
  })
})


$(document).ready(function() {
  $('.multyFour').on('blur', function() {
    let value = $(this).val() * 4
    let parent = this.parentNode
    let element = $(parent).next()
    $(element).text(value).show()
    $(this).hide()
    $

      (parent).text(value / 4)
  })
})

$(document).ready(function() {
  $('.multyNine').on('blur', function() {
    let value = $(this).val() * 9
    let parent = this.parentNode
    let element = $(parent).next()
    $(element).text(value).show()
    $(this).hide()
    $(parent).text(value / 9)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="carbos">
  <th>Carbohydrates</th>
  <td class="showInput" data-style="carboInput"><input class="multyFour" type="text" id="carboInput" placeholder="Enter a Number" style="display:none"></td>
  <td id="totalCalories" style="display:none"></td>

</tr>
<tr>
  <th>Fats</th>
  <td class="showInput" data-style="carboFats"><input type="text" class="multyNine" placeholder="Enter a Number" id="carboFats" style="display:none"></td>
  <td id="totalCalories" style="display:none"></td>

</tr>
<tr>
  <th>Protein</th>
  <td class="showInput" data-style="carboProtein"><input type="text" class="multyFour" placeholder="Enter a Number" id="carboProtein" style="display:none"></td>
  <td id="totalCalories" style="display:none"></td>
</tr>

Answer 1

＆＃13;

＆＃13;

    

$(document).ready(function() {

  $('.showInput').on('click', function(ev) {
       
         let input = $(this).next().attr("data-style")
         $('#' + input).val("")
         $('#' + input).show()
         $("span."+input).remove()
         $('#' + input).focus()
  })

  $('.multyFour').on('blur', function() {
        let value = $(this).val() * 4
        let parent = this.parentNode
        let element = $(parent).next()
        $(element).text(value).show()
        $(this).hide()
        //$(parent).text(value / 4)
        /*the problem is this line because
        it removes the input element*/
        $(parent).append(`<span class="carboInput">${value/9}</span>`)

  })

  $('.multyNine').on('blur', function() {
        let value = $(this).val() * 9
        let parent = this.parentNode
        let element = $(parent).next()
        $(element).text(value).show()
        $(this).hide()
        //$(parent).text(value / 9)
        $(parent).append(`<span class="carboInput">${value/9}</span>`)    
  })

})

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
<script src="./test.js"></script>    
<table>    
<!-- added table tag here !! -->    
    <tr class="carbos">    
      <th class="showInput" >Carbohydrates</th>    
       <!-- sorry but i changed the class to be for the th element -->    
      <td data-style="carboInput"><input style="display:none" class="multyFour" type="text" id="carboInput" placeholder="Enter a Number"></td>
      <td id="totalCalories" style="display:none"></td>

    </tr>    
    <tr>    
      <th class="showInput" >Fats</th>    
      <td data-style="carboFats"><input style="display:none" type="text" class="multyNine" placeholder="Enter a Number" id="carboFats" ></td>
      <td id="totalCalories" style="display:none"></td>

    </tr>    
    <tr>    
      <th class="showInput" >Protein</th>    
      <td data-style="carboProtein"><input style="display:none" type="text" class="multyFour" placeholder="Enter a Number" id="carboProtein" ></td>
      <td id="totalCalories" style="display:none"></td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;