使用jquery

Question

我正在尝试使用单击的按钮更改td值的值。我尝试了几种方法，但没有一种方法有效。如果用户点击显示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>

Answer 1

有2个问题

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");
    });

Answer 2

$(".cu-usd").removeClass('hide');
$(".cu-gbp").addClass('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');
    });

.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>

Answer 3

$('.btn-usd').on('click', function() {

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

.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>

在课程名称中缺少.

Answer 4

您的代码存在一些问题。

$('.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');
});

对类元素使用.运算符，并将其隐藏在引号中，因为它是作为字符串传递的。

还要优化在变量中取出$(".cu-usd")和$(".cu-gbp")。

Answer 5

您也可以使用.hide()和.show()进行操作，而不要 分配课程。结果是一样的。

并且如前所述，在classname中缺少.。但我想你现在已经知道了。

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

<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>