Here is the code that when moving the slider adds a picture, I need to translate it into jQuery. Help please please.

function funVolume() { var rng = document.getElementById('r1'); //rng - это Input var p = document.getElementById('one'); // span - span var vol_3 = document.getElementsByClassName('vol_3'); var value = rng.value; if(value < 50) { p.innerHTML = "<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'>"; } else if (value > 50) { p.innerHTML = "<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'><img style='margin: 3px 0 0 0' src ='img/vlo_3.png'>"; } if(value < 1){ p.innerHTML = " "; } }
  • one
    getElementById = $("#id") and getElementsByClassName = $(".class") , and also innerHTML = $(elem).html('что-то'); - Alexander Igorevich
  • Thanks, I will try - Ivan Bitkin
  • one
    What if value === 50? - vp_arth
  • @vp_arth, nothing - Obviously - Grundy

4 answers 4

 // вариант с вашего примера function funVolume() { var rng = $('#r1'); //rng - это Input var p = $('#one'); // span - span var vol_3 = $('.vol_3'); var value = rng.val(); if (value < 50) { p.html("<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'>"); } else if (value > 50) { p.html("<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'><img style='margin: 3px 0 0 0' src ='img/vlo_3.png'>"); } if (value < 1) { p.html(""); } } // но лучше сделать так: function funVolume() { var p = $('#one'); // span - span var value = $('#r1').val(); // получаем значание поля Input switch (true) { case (value < 1): p.html(""); break; case (value < 50): p.html("<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'>"); break; case (value > 50): p.html("<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'><img style='margin: 3px 0 0 0' src ='img/vlo_3.png'>"); break; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    It seems everything is so, I just study it myself =) I corrected a little

     function funVolume() { if ( $('#r1').val() < 50 ) { $('#one').html("<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'>"); } else if ( $('#r1').val() > 50 ) { $('#one').html("<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'><img style='margin: 3px 0 0 0' src ='img/vlo_3.png'>"); } if ( $('#r1').val() < 1 ) { $('#one').html(" "); } }
    • one
      I'll turn now) - Ivan Bitkin

    The exact answer:

     function funVolume() { let rng = $('#r1'); //rng - это Input let p = $('#one'); // span - span let vol_3 = $('.vol_3'); let value = rng.val(); if(value < 50) { p.html("<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'>"); } else if (value > 50) { p.html("<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'><img style='margin: 3px 0 0 0' src ='img/vlo_3.png'>"); } if(value < 1){ p.html(""); } }
    • It works, thanks! - Ivan Bitkin
    • Contact us;) and mark the answer as correct :) - Zicrael
     function funVolume() { var value = $('#r1').val(); if (value < 1) $('#one').empty(); else ($('#one').html(value < 50 ?"<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'>" :"<img style='margin: 7px -4px 0 0' src ='img/vol_2.png'><img style='margin: 3px 0 0 0' src ='img/vlo_3.png'>" ); }