Изменить значение таблицы с помощью 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

$(".cu-usd").removeClass('hide'); 
 
$(".cu-gbp").addClass('hide'); 
 
$('.btn-usd').on('click', function(){ 
 
    \t $(".cu-usd").removeClass('hide'); 
 
    \t $(".cu-gbp").addClass('hide'); 
 
    }); 
 
    $('.btn-gbp').on('click', function(){ 
 
    \t $(".cu-gbp").removeClass('hide'); 
 
    \t $(".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> 
 
    \t <tbody> 
 
    \t \t <tr> 
 
    \t \t \t <td><div class="cu-usd">$10</div><div class="cu-gbp">£7.10</div></td> 
 
    \t \t \t <td><div class="cu-usd">$20</div><div class="cu-gbp">£14.20</div></td> 
 
    \t \t \t <td><div class="cu-usd">$30</div><div class="cu-gbp">£21.30</div></td> 
 
    \t \t \t <td><div class="cu-usd">$40</div><div class="cu-gbp">£28.10</div></td> 
 
    \t \t </tr> 
 
    \t </tbody> 
 
    </table> 
 
    <table> 
 
    \t <tbody> 
 
    \t \t <tr> 
 
    \t \t \t <td><div class="cu-usd">$100</div><div class="cu-gbp">£70.10</div></td> 
 
    \t \t \t <td><div class="cu-usd">$200</div><div class="cu-gbp">£140.20</div></td> 
 
    \t \t \t <td><div class="cu-usd">$300</div><div class="cu-gbp">£210.30</div></td> 
 
    \t \t \t <td><div class="cu-usd">$400</div><div class="cu-gbp">£280.10</div></td> 
 
    \t \t </tr> 
 
    \t </tbody> 
 
    </table>

Answer 2

Есть 2 проблемы

1. селектор класса начинается с .
2. шкурой это строка должна быть в кавычках

После будет работать

$('.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 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() и не имеют назначить класс. Результат тот же.

и как упомянуто выше отсутствует . in имя-класса. Но я думаю, что вы это знаете.

$('.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> 
 
    \t <tbody> 
 
    \t \t <tr> 
 
    \t \t \t <td><div class="cu-usd">$10</div><div class="cu-gbp">£7.10</div></td> 
 
    \t \t \t <td><div class="cu-usd">$20</div><div class="cu-gbp">£14.20</div></td> 
 
    \t \t \t <td><div class="cu-usd">$30</div><div class="cu-gbp">£21.30</div></td> 
 
    \t \t \t <td><div class="cu-usd">$40</div><div class="cu-gbp">£28.10</div></td> 
 
    \t \t </tr> 
 
    \t </tbody> 
 
    </table> 
 
    <table> 
 
    \t <tbody> 
 
    \t \t <tr> 
 
    \t \t \t <td><div class="cu-usd">$100</div><div class="cu-gbp">£70.10</div></td> 
 
    \t \t \t <td><div class="cu-usd">$200</div><div class="cu-gbp">£140.20</div></td> 
 
    \t \t \t <td><div class="cu-usd">$300</div><div class="cu-gbp">£210.30</div></td> 
 
    \t \t \t <td><div class="cu-usd">$400</div><div class="cu-gbp">£280.10</div></td> 
 
    \t \t </tr> 
 
    \t </tbody> 
 
    </table>