Targeting issue when an item is clicked

Question

I have a problem about targeting. I have 5 items. They have own individual values for max and min temperatures in Celsius and Fahrenheit. I have to make them, when I click individual Celsius icon, should change just their value. But now, when I click any Celsius icon, its making changes about all values and they takes the first item's value. You can see it here:

var api_key = "dd39280551e44f1bb34221739171701&q=";
var loc;

$(document).ready(function() {
  // var latitude,longitude;
  

  $.getJSON('http://ipinfo.io', function(d){
    loc = d.loc.split(",");

    var apiLink = "http://api.apixu.com/v1/forecast.json?key=";
    var days5 = "&days=5";
    var api = apiLink + api_key + loc[0] +','+ loc[1] + days5;


    $.getJSON(api, function(v1) {

   
        var tempSwapForecast = true;


        var forecastdayData = v1.forecast.forecastday;

        var days = forecastdayData.map(function(d) {
          return d.day;
        });

        var maxtempc = days.map(function(maxc) {
          return maxc.maxtemp_c;
        });

        var mintempc = days.map(function(minc) {
          return minc.mintemp_c;
        });

        var maxtempf = days.map(function(maxf) {
          return maxf.maxtemp_f;
        });

        var mintempf = days.map(function(minf) {
          return minf.mintemp_f;
        });


        $('.forecasticons img').each(function(i) {
          $(this).attr('src', days[i].condition.icon);
        });

        $('.frc-temp').each(function(i) {
          $(this).html(Math.round(maxtempc[i]) + "-" + Math.round(mintempc[i]));
            $('.frc-degree').click(function() {
              for (var j = 0; j < $(this).length; j++) {
                if(tempSwapForecast===false){
                  $('.frc-temp').html(Math.round(maxtempc[j]) + "-" + Math.round(mintempc[j]));
                  $('.frc-degree').html(" ℃");
                  tempSwapForecast = true;
                } else {
                  $('.frc-temp').html(Math.round(maxtempf[j]) + "-" + Math.round(mintempf[j]));
                  $('.frc-degree').html("℉");
                  tempSwapForecast = false;
                }

              }
             

            });



        });


        $('.forecastText').each(function(i) {
          $(this).html(days[i].condition.text);
        });


    });
  });
});

Snowmonkey · Accepted Answer

Very small changes to make it work: in your click handler, rather than finding by class the field to fill, I use the clicked element to find its parent and then find the class WITHIN that parent. So it becomes $(this).parent().find(...) All these changes are between lines 53 and 59.

var api_key = "dd39280551e44f1bb34221739171701&q=";
var loc;

$(document).ready(function() {
  // var latitude,longitude;


  $.getJSON('http://ipinfo.io', function(d) {
    loc = d.loc.split(",");

    var apiLink = "http://api.apixu.com/v1/forecast.json?key=";
    var days5 = "&days=5";
    var api = apiLink + api_key + loc[0] + ',' + loc[1] + days5;


    $.getJSON(api, function(v1) {


      var tempSwapForecast = true;


      var forecastdayData = v1.forecast.forecastday;

      var days = forecastdayData.map(function(d) {
        return d.day;
      });

      var maxtempc = days.map(function(maxc) {
        return maxc.maxtemp_c;
      });

      var mintempc = days.map(function(minc) {
        return minc.mintemp_c;
      });

      var maxtempf = days.map(function(maxf) {
        return maxf.maxtemp_f;
      });

      var mintempf = days.map(function(minf) {
        return minf.mintemp_f;
      });


      $('.forecasticons img').each(function(i) {
        $(this).attr('src', days[i].condition.icon);
      });

      $('.frc-temp').each(function(i) {
        // Added a 'units' property, so the temperature
        //  can track what type of unit it is displaying.
        $(this).data("units", "c");
        $(this).html(Math.round(maxtempc[i]) + "-" + Math.round(mintempc[i]));
      });
      $('.frc-degree').on("click", function() {
        // As we use the .frc-temp el often, reference it once.
        var myTempEl = $(this).parent().find(".frc-temp");
        // This is the unique index of the clicked day.
        var myIndex = $(".forecastday").index(
          $(this).parents(".forecastday")
        );
        /****
         * Above, we created a data attribute on the
         *  .frc-temp element to store the units. By
         *  doing this, the element becomes self-
         *  contained. Here, we can toggle the units
         *  based on that data attribute.
         ****/
        if (myTempEl.data("units") === "f") {
          // First, switch the unit attribute...
          myTempEl.data("units", "c");
          // Then, replace the contents of the temp el
          myTempEl.html(
            Math.round(maxtempc[myIndex]) +
            "-" +
            Math.round(mintempc[myIndex]));
          // Then, set the contents of this to 'c'  
          $(this).html(" ℃");
          tempSwapForecast = true;
        } else {
          myTempEl.data("units", "f");
          myTempEl.html(
            Math.round(maxtempf[myIndex]) +
            "-" +
            Math.round(mintempf[myIndex]));
          $(this).html("℉");
          tempSwapForecast = false;
        }

      });



      $('.forecastText').each(function(i) {
        $(this).html(days[i].condition.text);
      });


    });
  });
});

So many many small changes here: the frc-temp elements now have a data attribute that tracks whether the units are farenheit or centigrade, and the way I reference the elements has also changed slightly.

Targeting issue when an item is clicked

Answers (1)

Related Questions