Перевести Js в JQuery

208

14 мая 2018, 02:50

Вот код который при перемещение ползунка добавляет картинку, мне надо перевести его на JQuery. Помогите пожайлуста.

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 = " ";
    }
}

Answer 1

// вариант с вашего примера 
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>

Answer 2

Вроде всё так, сам только изучаю =) Поправил немного

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(" ");
    }
}

Answer 3

Точный ответ:

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("");
    }
}

Answer 4

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'>"
                       );
}