Question

我想知道如何以合适的尺寸插入glyphicon glyphicon-transfer以适合货币转换器程序“从货币：到货币：”并且当用户点击“glyphicon”下拉菜单时货币类型“从货币”和“到货币”将切换下拉菜单。

这是一个例子，我想将5英镑的金额从英镑兑换成欧元，如果点击下标菜单，我点击后面的下拉菜单就会转换为欧元兑换英镑。

为了实现glyphicon，我使用了以下代码。但是，我无法将货币转换器中的图标放在正确的位置，请注意我正在使用bootstrap创建响应式站点。

<div class="col-sm-4">
  <span class="glyphicon glyphicon-transfer logo-small"></span>
</div>

Codepen

javascript代码

// Fetch exchange rate data from api
$.getJSON("https://api.fixer.io/latest?base=ZAR", function(data) {
  var currencies = [];
  $.each(data.rates, function(currency, rate) {
    // Currency options dropdown menu
    currencies.push("<option id='" + currency.toLowerCase() + "' value='" + rate + "' >" + currency + "</option>");
  });
  $(".currency-list").append(currencies);
})

//Calculate and output the new amount
function exchangeCurrency() {
  var amount = $(".amount").val();
  var rateFrom = $(".currency-list")[0].value;
  var rateTo = $(".currency-list")[1].value;
  if ((amount - 0) != amount || (''+amount).trim().length == 0) {
    $(".results").html("0");
    $(".error").show()
  } else {
    $(".error").hide()
    if (amount == undefined || rateFrom == "--Select--" || rateTo == "--Select--") {
      $(".results").html("0");

    } else {
      $(".results").html((amount * (rateTo * (1 / rateFrom))).toFixed(2));
    }
  }
}

最后，我正在寻找一些帮助，将glyphicon glyphicon-transfer插入上述货币转换器程序中的文本之上。

此外，我想知道用户何时点击下拉菜单货币类型将如何切换的图标。例子如上。

Answer 1

我添加了一个新的row，其中包含glyphicon和来自和。

<div class="row">
    <div class="col-sm-12" style="text-align: center">
        <span style="color: #FFF" class="glyphicon glyphicon-transfer logo-small"></span>
    </div>
    <div class="form-group inline-block">
        <label for="">From currency:</label>
        <select class="currency-list form-control from" onclick="exchangeCurrency()">
            <option>--Select--</option>
        </select>
    </div>

    <div class="form-group inline-block">
        <label>To currency:</label>
        <select class="currency-list form-control to" onclick="exchangeCurrency()">
            <option>--Select--</option>
        </select>
    </div>
</div>

并在click上添加.logo-small事件以交换值并计算货币。

$('.logo-small').on('click', function () {
    var toValue = $('.to').find(':selected').val();
    var toText =  $('.to').find(':selected').text();

    var fromValue = $('.from').find(':selected').val();
    var fromText =  $('.from').find(':selected').text();

    $('.from').find(':selected').val(toValue);
    $('.from').find(':selected').text(toText);

    $('.to').find(':selected').val(fromValue);
    $('.to').find(':selected').text(fromText);
    exchangeCurrency();
})

将新的class添加到您的select to和from

<select class="currency-list form-control from" onclick="exchangeCurrency()">

和

<select class="currency-list form-control to" onclick="exchangeCurrency()">

 // Fetch exchange rate data from api
    $.getJSON("https://api.fixer.io/latest?base=ZAR", function(data) {
        var currencies = [];
        $.each(data.rates, function(currency, rate) {
            // Currency options dropdown menu
            currencies.push("<option id='" + currency.toLowerCase() + "' value='" + rate + "' >" + currency + "</option>");
        });
        $(".currency-list").append(currencies);
    })

    //Calculate and output the new amount
    function exchangeCurrency() {
        var amount = $(".amount").val();
        var rateFrom = $(".currency-list")[0].value;
        var rateTo = $(".currency-list")[1].value;
        if ((amount - 0) != amount || (''+amount).trim().length == 0) {
            $(".results").html("0");
            $(".error").show()
        } else {
            $(".error").hide()
            if (amount == undefined || rateFrom == "--Select--" || rateTo == "--Select--") {
                $(".results").html("0");

            } else {
                $(".results").html((amount * (rateTo * (1 / rateFrom))).toFixed(2));
            }
        }
    }

    $('.logo-small').on('click', function () {
        var toValue = $('.to').find(':selected').val();
        var toText =  $('.to').find(':selected').text();

        var fromValue = $('.from').find(':selected').val();
        var fromText =  $('.from').find(':selected').text();

        $('.from').find(':selected').val(toValue);
        $('.from').find(':selected').text(toText);

        $('.to').find(':selected').val(fromValue);
        $('.to').find(':selected').text(fromText);
        exchangeCurrency();
    })

 html {
            font-size: 20px;
        }

        .panel {
            background: #333333;
            border: solid white;
        }

        .results {
            font-size: 1em;
         
        }

        .dropdown {
            margin-bottom: 50px;
        }

        .inline-block {
            display: inline-block;
        }

        .center {
            width: 90%;
            margin: 0 auto 30px;
        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

<!-- <script src="program.js"></script> missing-->
<!-- Navigation Bar -->
<nav class="menu navbar-default navbar-menu">
    <div class="container">
        <div class="menu-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand">Currency Converter Website</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="home.html">Home</a></li>
                <li><a href="currencyprogram.html">Currency Converter Program</a></li>
            </ul>
        </div>
    </div>
</nav>
<!-- End of navbar-->
<br>
<br>
<br>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary text-center">
                <div class="panel-heading">
                    <h4 class="panel-title">Currency Converter</h4>
                </div>
                <div class="error">
                    Please enter numeric value
                </div>
                <div class="panel-body">
                    <form class="form-vertical">

                        <div class="form-group center">
                            <label for="">Enter Value:</label>
                            <input type="number" class="amount form-control" placeholder="Enter value" min="1">
                        </div>


                        <div class="row">
                            <div class="col-sm-12" style="text-align: center">
                                    <span class="glyphicon glyphicon-transfer logo-small"></span>
                            </div>
                            <div class="form-group inline-block">
                                <label for="">From currency:</label>
                                <select class="currency-list form-control from" onclick="exchangeCurrency()">
                                    <option>--Select--</option>
                                </select>
                            </div>

                            <div class="form-group inline-block">
                                <label>To currency:</label>
                                <select class="currency-list form-control to" onclick="exchangeCurrency()">
                                    <option>--Select--</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <p class="results">0</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Money pics -->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2016/11/30/u-k-s-first-ever-plastic-5-bill-has-really-upset-vegans/_jcr_content/par/featured_image/media-0.img.jpg/876/493/1480522867287.jpg" target="_blank">
                    <img src="http://a57.foxnews.com/images.foxnews.com/content/fox-news/tech/2016/11/30/u-k-s-first-ever-plastic-5-bill-has-really-upset-vegans/_jcr_content/par/featured_image/media-0.img.jpg/876/493/1480522867287.jpg" alt="Pic1" style="width:100%">
                </a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="https://w-dog.net/wallpapers/12/1/458166855232810/money-euro-euro-currency-notes-close-up.jpg" target="_blank">
                    <img src="https://w-dog.net/wallpapers/12/1/458166855232810/money-euro-euro-currency-notes-close-up.jpg" alt="Pic2" style="width:100%">
                </a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <a href="https://cdn.shutterstock.com/shutterstock/videos/7477096/thumb/9.jpg" target="_blank">
                    <img src="https://cdn.shutterstock.com/shutterstock/videos/7477096/thumb/9.jpg" alt="Pic3" style="width:100%">
            </div>
            </a>
        </div>
    </div>
</div>
<!-- End of money pics -->

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <p class="text-center">© Liam Docherty All Rights Reserved | Portfolio - <a href="http://liam-portfolio.surge.sh">http://liam-portfolio.surge.sh</a></p>
    </div>
    </div>

如何在我的程序中实现glyphicon并完成货币类型切换？

1 个答案: