Question

我有一张定价表，我打算在其中使用切换按钮（每月/每年）切换价格编号，链接href和时间间隔文本。我只是不知道如何让它开始工作。任何帮助表示赞赏。

<select class="segment-select">
  <option value="1">Monthly</option>
  <option value="2">Yearly</option>
</select>
<div class="content1">
    $<span class="price">25<!-- show 250 when toggled!--></span> 
    <span class="interval">monthly <!-- show yearly when toggled!--></span>
    <a href="link1<!-- link1-alt when toggled!-->">Sign up</a>
</div>
<div class="content2">
    $<span class="price">45<!-- show 450 when toggled!--></span> 
    <span class="interval">monthly <!-- show yearly when toggled!--></span>
    <a href="link2<!-- link2-alt when toggled!-->">Sign up</a>
</div>

JSFiddle：http://jsfiddle.net/ttsqqcoy/

Answer 1

您应该使用java脚本来执行此操作

$('.segment-select').change(function(e) {
  if ($(".segment-select option:selected").val() == '1')
  {
    $('.content1').show();
    $('.content2').hide();
  } else {
    $('.content2').show();
    $('.content1').hide();
  }
})

如果这是你需要的？

Answer 2

以下是一种方法，如何完成此操作（对原始代码进行更改）：

<强> HTML：

<div class='contentTable'>
  <div class="content">
      <span class="price"></span> 
      <span class="interval"></span>
      <a class='link' href="#">Sign Up</a>
  </div>
  <div class="content">
      <span class="price"></span>
      <span class="interval"></span>
      <a class='link' href="#">Sign Up</a>
  </div> 
</div>

<强>的Javascript

$(".segment-select").Segment();

var options = {
    monthly: [
        {price: 25, link: 'link1'},
        {price: 45, link: 'link2'},
    ],
    yearly: [
        {price: 300, link: 'link3'},
        {price: 540, link: 'link4'},
    ]
}

function fillContent(interval) {
    var data = options[interval];

    $('.content').each(function(index) {
        var content = $(this);

        content.find('.price').text('$' + data[index].price);
        content.find('.interval').text(interval);
        content.find('.link').attr('href', data[index].link);
    });
}

// initialization 

fillContent("monthly");

$('.ui-segment').on("click", '.option', function() {
    var interval = $(this).attr('value');

    fillContent(interval);
});

以下是jsfiddle的例子：

http://jsfiddle.net/tara5/5kgw964L/

它应该解决你表中这两行的问题。

但是，如果您有两行以上，甚至不是一定数量的行，代码将变得混乱且难以维护。（通常在DOM中保存数据是不好的。）

所以你应该尝试使用Backbone，例如。

以下是使用Backbone（jsfiddle链接）解决问题的方法：

http://jsfiddle.net/tara5/2r3t2Lrg/

另请参阅Backbone文档和示例。（现在不能提供它们，不能发布超过2个链接=））

使用jQuery切换更改html代码

2 个答案: