单击iteme时的目标问题

时间：2017-01-18 18:56:22

标签： javascript jquery javascript-events click

我遇到了定位问题。我有5件物品。它们在celcius和fahrenheit中具有最大和最小tempature的个体值。我必须制作它们，当我点击单独的celcius图标时，应该只改变它们的值。但现在，当我点击任何celcius图标时，它会对所有值进行更改，并且它们会获取第一个项目的值。你可以在这里看到它; 

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(" &#8451;");
                  tempSwapForecast = true;
                } else {
                  $('.frc-temp').html(Math.round(maxtempf[j]) + "-" + Math.round(mintempf[j]));
                  $('.frc-degree').html("&#8457;");
                  tempSwapForecast = false;
                }

              }
             

            });



        });


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


    });
  });
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="other-days">
          <div class="forecastday">
            <div class="forecasticons" >
              <img class="fcicon" alt="weather-icon" src="">
            </div>
            <div class="forecastText"></div>
            <div class="forecasttemp">
              <span class="frc-temp"></span>
              <a class="frc-degree" href="#">&#8451;</a>
            </div>
          </div>

          <div class="forecastday">
            <div class="forecasticons" >
              <img class="fcicon" alt="weather-icon" src="">
            </div>
              <div class="forecastText"></div>
            <div class="forecasttemp">
              <span class="frc-temp"></span>
              <a class="frc-degree" href="#">&#8451;</a>
            </div>
          </div>

          <div class="forecastday">
            <div class="forecasticons" >
              <img class="fcicon" alt="weather-icon" src="">
            </div>
              <div class="forecastText"></div>
            <div class="forecasttemp">
              <span class="frc-temp"></span>
              <a class="frc-degree" href="#">&#8451;</a>
            </div>
          </div>

          <div class="forecastday">
            <div class="forecasticons" >
              <img class="fcicon" alt="weather-icon" src="">
            </div>
              <div class="forecastText"></div>
            <div class="forecasttemp">
              <span class="frc-temp"></span>
              <a class="frc-degree" href="#">&#8451;</a>
            </div>
          </div>

          <div class="forecastday">
            <div class="forecasticons" >
              <img class="fcicon" alt="weather-icon" src="">
            </div>
              <div class="forecastText"></div>
            <div class="forecasttemp">
              <span class="frc-temp"></span>
              <a class="frc-degree" href="#">&#8451;</a>
            </div>
          </div>
        </div>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>

</body>
</html>

我在等你有价值的帮助。

1 个答案:

答案 0 :(得分：2)

使其工作的微小变化：在你的点击处理程序中，我不是通过类来查找要填充的字段，而是使用clicked元素查找其父元素，然后在父元素中找到WITHIN类。所以它变成$（this）.parent（）。find（...）所有这些变化都在第53和59行之间。

＆＃13;
＆＃13; 
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(" &#8451;");
          tempSwapForecast = true;
        } else {
          myTempEl.data("units", "f");
          myTempEl.html(
            Math.round(maxtempf[myIndex]) +
            "-" +
            Math.round(mintempf[myIndex]));
          $(this).html("&#8457;");
          tempSwapForecast = false;
        }

      });



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


    });
  });
});
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="other-days">
    <div class="forecastday">
      <div class="forecasticons">
        <img class="fcicon" alt="weather-icon" src="">
      </div>
      <div class="forecastText"></div>
      <div class="forecasttemp">
        <span class="frc-temp"></span>
        <a class="frc-degree" href="#">&#8451;</a>
      </div>
    </div>

    <div class="forecastday">
      <div class="forecasticons">
        <img class="fcicon" alt="weather-icon" src="">
      </div>
      <div class="forecastText"></div>
      <div class="forecasttemp">
        <span class="frc-temp"></span>
        <a class="frc-degree" href="#">&#8451;</a>
      </div>
    </div>

    <div class="forecastday">
      <div class="forecasticons">
        <img class="fcicon" alt="weather-icon" src="">
      </div>
      <div class="forecastText"></div>
      <div class="forecasttemp">
        <span class="frc-temp"></span>
        <a class="frc-degree" href="#">&#8451;</a>
      </div>
    </div>

    <div class="forecastday">
      <div class="forecasticons">
        <img class="fcicon" alt="weather-icon" src="">
      </div>
      <div class="forecastText"></div>
      <div class="forecasttemp">
        <span class="frc-temp"></span>
        <a class="frc-degree" href="#">&#8451;</a>
      </div>
    </div>

    <div class="forecastday">
      <div class="forecasticons">
        <img class="fcicon" alt="weather-icon" src="">
      </div>
      <div class="forecastText"></div>
      <div class="forecasttemp">
        <span class="frc-temp"></span>
        <a class="frc-degree" href="#">&#8451;</a>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>

</body>

</html>
＆＃13;
＆＃13;
＆＃13; 这里有很多小的变化：frc-temp元素现在有一个数据属性来跟踪单位是华氏度还是摄氏度，我引用元素的方式也略有改变。

相关问题
最新问题