Не могу клонировать код JS

194

25 сентября 2017, 00:57

Есть код только для одного div. Мне нужно эту функцию применить к другим дивам с разными id.

Меняю параметры в функции и ничего не получается, работает только один из них или вообще не один. что делать

var price1;
var reloadData = function() {
  $.getJSON('https://api.cryptonator.com/api/ticker/btc-usd', function(data){
    var float1 = parseFloat(data.ticker.price).toFixed(2)
    if(price1 && price1 > float) {
        $('#result1').html('<font color="red">' + float1 + '</font>')
    }
    else if(price1 && price1 < float1) {
        $('#result1').html('<font color="green">' + float1 + '</font>')
    }
    else {
        $('#result1').text(float1)
    }
    price1 = float1
  })
}
setInterval('reloadData()', 5000)
$(document).ready(reloadData)
var price2;
var reloadData = function() {
  $.getJSON('https://api.cryptonator.com/api/ticker/ltc-usd', function(data){
    var float2 = parseFloat(data.ticker.price).toFixed(2)
    if(price2 && price2 > float2) {
        $('#result2').html('<font color="red">' + float2 + '</font>')
    }
    else if(price2 && price2 < float) {
        $('#result2').html('<font color="green">' + float2 + '</font>')
    }
    else {
        $('#result2').text(float2)
    }
    price2 = float2
  })
}
setInterval('reloadData()', 5000)
$(document).ready(reloadData)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result1">Loading...</div>
<div id="result2">Loading...</div>

Answer 1

Зачем что-то клонировать ? сделайте одну функцию, для всех.

Как-то так :

function reloadAll() { 
  setInterval(function() { 
    reloadData('result1', 'url 1'); 
  }, 1000); 
  setInterval(function() { 
    reloadData('result2', 'url 2'); 
  }, 1000); 
}; 
 
function reloadData(id, url) { 
  // url - для разных дивов разные url   
  var float = Math.floor(Math.random() * 100) + 1; 
  var prev = parseFloat($('#' + id).text()); 
 
  var color = float >= prev ? 'green' : 'red'; 
  $('#' + id).text(float).css('color', color); 
}; 
 
$(document).ready(reloadAll);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="result1">Loading...</div> 
<div id="result2">Loading...</div>

ПС: никогда не делайте много функций, которые делают одно и то же, лучше сделать 1ну, но более гибкую, функцию.

Answer 2

let base = [ 
  { id: 1, url: 'btc-usd' }, 
  { id: 2, url: 'ltc-usd' } 
]; 
 
setInterval(reloadData, 5000) 
$(document).ready(reloadData) 
 
function reloadData() { 
  for(let i = 0; i < base.length; i++) { 
    $.getJSON(`https://api.cryptonator.com/api/ticker/${base[i].url}`, function(data){ 
      const $result = $(`#result${base[i].id}`), 
        newPrice = parseFloat(data.ticker.price).toFixed(2); 
       
      if(base[i].price && base[i].price !== newPrice) { 
        $result.html(`<font color="${(base[i].price > newPrice ? 'red' : 'green')}">${newPrice}</font>`); 
      } else { 
        $result.text(newPrice) 
      } 
       
      base[i].price = newPrice; 
    }) 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="result1">Loading...</div> 
<div id="result2">Loading...</div>