Question

我有两个输入标签和两个选择下拉标签，所以我希望输入值和从下拉列表中选择的值总是在同一页面的结果范围上更新（onchange 和 keyup）。这是一个货币转换器项目。

$(document).ready(function () {
      var baseCurrency = "BTC";
      var pay_amount = 1;
      var targetCurrency = "ETH";
      var get_amount;
      $("#crypto12").html(targetCurrency);
      $("#crypto14").html(targetCurrency);
      $("#crypto16").html(targetCurrency);
      $("#crypto13").html(baseCurrency);
      $("#crypto15").html(baseCurrency);
      $("#crypto17").html(baseCurrency);
      $("#crypto19").html(targetCurrency);
       var url;
       currencyConverter(baseCurrency, pay_amount,targetCurrency,get_amount)
       
        // some variables
        $("#crypto1").ddslick({
          imagePosition: "left",
          selectText: "BTC",
          onSelected: function (data) {
            $("#selected").html((baseCurrency = data.selectedData.value));
            currencyConverter(baseCurrency,pay_amount,targetCurrency,get_amount );
          },
        });

        $("#crypto2").ddslick({
          imagePosition: "left",
          selectText: "ETH",
          onSelected: function (data) {
            $("#selected").html((targetCurrency = data.selectedData.value));
           currencyConverter2(baseCurrency,pay_amount,targetCurrency,get_amount );
          },
        });

       // currencyConverter(baseCurrency, pay_amount, targetCurrency, get_amount);

        // get base currency value

        $("#crypto1").change(function () {
          // base currency

          baseCurrency = $(this).children("option:selected").val();

          // call currencyConverter function
          currencyConverter(baseCurrency,pay_amount,targetCurrency,get_amount );
        });

        // get base currency number

        $("#pay_amount").keyup(function () {
          // base number

          pay_amount = $(this).val();

          // call currencyConverter function

          currencyConverter(baseCurrency,pay_amount,targetCurrency,get_amount );
        });

        // get target currency value

        $("#crypto2").change(function () {
          // target currency

         targetCurrency = $(this).children("option:selected").val();
                   
          // call currencyConverter function

          currencyConverter2(baseCurrency,pay_amount,targetCurrency,get_amount );
        });

        // get target currency number

        $("#get_amount").keyup(function () {
          // target number

          get_amount = $(this).val();

          // call currencyConverter function

          currencyConverter2(baseCurrency,pay_amount,targetCurrency,get_amount );
        });
        
        
        function currencyConverter(baseCurrency,pay_amount,targetCurrency,get_amount) {
          // api url

          var url = "https://coinlib.io/api/v1/coin?key=659b81f02b22b218&pref=" + targetCurrency + "&symbol=" + baseCurrency;
           

          // make a get request to API

          $.get(url, function (data) {
            console.log(data.price)

            //for (let [key, value] of Object.entries(data.price)) {
            //console.log(data.price);
            var result = parseFloat(data.price * pay_amount).toFixed(4);

            var divobj = document.getElementById("get_amount");
            divobj.value = result;

            $("#get_amount").html($("#get_amount").val());
            $("#crypto12").html(targetCurrency);
            $("#crypto14").html(targetCurrency);
            $("#crypto16").html(targetCurrency);
            $("#crypto19").html(targetCurrency);            
            $("#crypto16")
              .parent()
              .find("#result")
              .html($("#get_amount").val());
              
              $("#crypto14")
              .parent()
              .find("#result")
              .html($("#get_amount").val());
           // }
            //console.log(`data.price.${targetCurrency}`)
          });
        }
        //currencyConverter(baseCurrency, pay_amount, targetCurrency, get_amount);
         
        function currencyConverter2(baseCurrency, pay_amount, targetCurrency, get_amount) {
          // api url

          var url = "https://coinlib.io/api/v1/coin?key=659b81f02b22b218&pref=" + baseCurrency + "&symbol=" + targetCurrency;

          // make a get request to API

          $.get(url, function (data) {
            console.log(data.price)

            for (let [key, value] of Object.entries(data.price)) {
             // console.log(value)

              var result = parseFloat(data.price * get_amount).toFixed(4);
              var divobj = document.getElementById("pay_amount");
              divobj.value = result;
              
            $("#pay_amount").html($("#pay_amount").val());
            $("#crypto13").html(baseCurrency);
            $("#crypto15").html(baseCurrency);
            $("#crypto17").html(baseCurrency);
            $("#crypto17")
              .parent()
              .find("#result")
              .html($("#pay_amount").val());
              
               $("#crypto15")
              .parent()
              .find("#result")
              .html($("#pay_amount").val());
            }
            //console.log(`data.price.${targetCurrency}`)
          });
        }
        //currencyConverter(baseCurrency, pay_amount, targetCurrency, get_amount);
      });

这是完整的代码at JSfiddle。

Answer 1

我可以通过更改 id 名称以匹配 html 来使其工作。

HTML

<select name="" id="slick">
        <option
          value="BTC"
          data-description="Bitcoin"
          data-imagesrc="https://app.coinloan.io/app/img/ic_btc.c39a5bf.svg"
          >BTC</option
        >

以前的代码

$("#crytpo1").change(function () {
          // base currency
          baseCurrency = $(this).children("option:selected").val();

          // call currencyConverter function
          currencyConverter(baseCurrency,pay_amount,targetCurrency,get_amount );
        });

我的变化

$("#slick").change(function () {
          // base currency
          baseCurrency = $(this).children("option:selected").val();

          // call currencyConverter function  
        currencyConverter(baseCurrency,pay_amount,targetCurrency,get_amount );
        });

我在从 jquery 下拉列表中获取选定值时遇到问题

1 个答案: