javascript - 使用 Jquery 显示下拉列表中的链接的更简单方法

Question

这是我第一次尝试 JQuery，我正在使用来自 http://www.timeanddate.com 的嵌入式 iframe 构建世界时钟。 - 这个概念是用户从下拉列表中选择城市，它将显示该城市的正确时间

<div>
        <select>
<option value="n136" selected>London</option>
<option value="n240">Sydney</option>
<option value="n179">New York City</option>
        </select>
</div>
<div class ="n136 time"><iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n136/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" frameborder="0" width="80" height="38" allowTransparency="true"></iframe></div>
<div class ="n240 time"><iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n240/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" frameborder="0" width="80" height="38" allowTransparency="true"></iframe></div>
<div class ="n179 time"><iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n179/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" frameborder="0" width="80" height="38" allowTransparency="true"></iframe></div>

JQuery

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      if ($(this).attr("value") == "n136") {
        $(".time").not(".n136").hide();
        $(".n136").show();
      } else if ($(this).attr("value") == "n240") {
        $(".time").not(".n240").hide();
        $(".n240").show();
      } else if ($(this).attr("value") == "n179") {
        $(".time").not(".n179").hide();
        $(".n179").show();
      } else {
        $(".time").hide();
      }
    });
  }).change();
});

它有效。 FIDDLE

问题是我还有 10 个世界时间要添加，这将成为一个非常大的脚本，将加载 13 个世界时间，隐藏 12 个，这似乎是非常糟糕的做法，我认为如果只有一个 IFrame 可以大大改进加载后，然后当用户从下拉列表中选择一个城市时，Iframe URL 的值更改部分(就好像 n*** 数字是一个变量)到 div 类，因为它们中的每一个都是每个的正确代码城市。这样会更有效率。

然而，我似乎已经达到了 JQuery 的极限，如果有人可以帮助我，甚至让我开始，我将不胜感激。

Answer 1

在选择器中使用关键字 this 并更改一个 iframe 的 src:

HTML:

<div>
    <select>
        <option value="n136" selected>London</option>
        <option value="n240">Sydney</option>
        <option value="n179">New York City</option>
    </select>
</div>
<div class="n136 time">
    <iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n136/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" id="timeDisplay" frameborder="0" width="80" height="38" allowTransparency="true"></iframe>
</div>

JS:

$(document).ready(function() {
    $("select").change(function() {
        $("#timeDisplay")[0].src = "https://freesecure.timeanddate.com/clock/i50ppgou/" + $(this).attr("value") + "/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1";
    }).change();
});

fiddle :http://jsfiddle.net/p8ARq/610/