javascript - 使用 jquery 更改表值

标签 javascript jquery html css

我正在尝试使用单击的按钮更改 td 值的值。我尝试了几种方法,但都没有奏效。如果用户点击 Show USD 按钮列只显示 USD 值,如果用户点击 GBP 列应该显示 GBP 值。我不知道这是执行此操作的正确方法。非常感谢任何帮助。

$('.btn-usd').on('click', function(){
    $("cu-usd").removeClass(hide);
    $("cu-gbp").addClass(hide);
});
$('.btn-gbp').on('click', function(){
    $("cu-gbp").removeClass(hide);
    $("cu-usd").addClass(hide);
});
.hide {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-usd">show USD</div>
<div class="btn-gbp">show GBP</div>
<table>
    <tbody>
        <tr> 
            <td>
                <div class="cu-usd">$10</div>
                <div class="cu-gbp">£7.10</div>
            </td>
            <td>
                <div class="cu-usd">$20</div>
                <div class="cu-gbp">£14.20</div>
            </td>
            <td>
                <div class="cu-usd">$30</div>
                <div class="cu-gbp">£21.30</div>
            </td>
            <td>
                <div class="cu-usd">$40</div>
                <div class="cu-gbp">£28.10</div>
            </td>
        </tr>
    </tbody>
</table>
<table>
    <tbody>
        <tr> 
            <td>
                <div class="cu-usd">$100</div>
                <div class="cu-gbp">£70.10</div>
            </td>
            <td>
                <div class="cu-usd">$200</div>
                <div class="cu-gbp">£140.20</div>
            </td>
            <td>
                <div class="cu-usd">$300</div>
                <div class="cu-gbp">£210.30</div>
            </td>
            <td>
                <div class="cu-usd">$400</div>
                <div class="cu-gbp">£280.10</div>
            </td>
        </tr>
    </tbody>
</table>

最佳答案

有两个问题

  1. 类选择器以开头。
  2. hide是一个字符串,必须用引号括起来

以下将起作用

 $('.btn-usd').on('click', function(){
        $(".cu-usd").removeClass("hide");
        $(".cu-gbp").addClass("hide");
    });
    $('.btn-gbp').on('click', function(){
        $(".cu-gbp").removeClass("hide");
        $(".cu-usd").addClass("hide");
    });

关于javascript - 使用 jquery 更改表值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37966176/

相关文章:

javascript - 选择一个没有 "selected"属性的选择选项元素

javascript - 使用 Javascript 更改鼠标滚轮/触控板灵敏度

javascript - Chart.js jQuery 插件

javascript - Base64 SVG 无法在 Chrome 中呈现,在 Firefox 中有效

javascript - 为什么 Mongoose updateMany() 仅在使用 .then 时才起作用

c# - 0x800a1391 - JavaScript 运行时错误 : 'Edit_Button_Click' is undefined

javascript - 如何在 D3.js 和 HTML 中增加鼠标悬停时的圆弧

javascript - 可以在 extjs 中完成动态 Vtype 验证(如下代码)

javascript - Highcharts - 图表回流功能问题

css - HTML5 正文间距问题