使用 jQuery 切换更改 html 代码

Question

我得到了一个定价 table，我打算在其中使用切换按钮 (monthly/yearly) 切换价格编号、link 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/

它应该可以解决您 table 中这两行的问题。

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

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

以下是如何使用 Backbone (jsfiddle link) 解决您的问题：

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

另请参阅 Backbone 文档和示例。（现在不能提供，不能post超过2links =））

使用 jQuery 切换更改 html 代码

change html codes using jQuery toggle

html

javascript

jquery

togglebutton