JQuery隐藏大于表中变量的元素

-2

<input type="checkbox" id="canafford"></input>

我想要它，所以当您检查该复选框时，只会显示您可以购买的升级。这是我的升级代码（时间更长，但我只会向您展示一个部分）。JQuery隐藏大于表中变量的元素

<tr id="up1"> 
    <td><button onclick="upgrade(2, 1)">Upgrade</button></td> 
    <td>2 gold</td> 
    <td>x2 Resting speed.</td> 
</tr>

他们每个人都有ID上一条UP2 UP3等。所有我需要的是如果黄金（货币）比它的价格就会隐藏低。价格是所有人中的第二个td;在这种情况下，它的2金。

来源

2016-07-24 killereks

什么是黄金curreny和价格？你能否提供更多的代码以提供适当的建议 – Vaibhav

在示例中，id up1的价格是第二个，这是2 gold。 – killereks

使价格成为属性而不是文本，例如''那么你可以比较。但除此之外，你错过了大部分的问题... –

您可以通过几种可能的方式来做到这一点。这是工作解决方案之一。

请检查此片段，随时编辑变量'goldAvailable'。实际上，每次点击此复选框时，我都会遍历所有tr元素。如果它被检查，那么我会从第二个td项获取值并将其解析为整数，以便我可以将其与可用资金进行比较。所有更高可用的东西都会隐藏起来。在盒子的一切取消选中越来越为display：block

var goldAvailable = 3; 
 

 
$('#canafford').on('click', function(){ 
 
    if($('#canafford:checkbox:checked').length > 0) { 
 
     $('tr td:nth-child(2)').each(function() { 
 
      var gold = $(this).html(); 
 
      gold= parseInt(gold.substring(0,gold.length-4)); 
 
      if(gold>goldAvailable) { 
 
       $(this).closest('tr').css('display','none'); 
 
      } 
 
     }); 
 
    } else { 
 
      $('tr td:nth-child(2)').each(function() { 
 
       $(this).closest('tr').css('display','block'); 
 
      }); 
 
    } 
 
    
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <input type="checkbox" id="canafford"> </input> 
 
    <table> 
 
    <tr id="up1"> 
 
     <td><button onclick="upgrade(2, 1)">Upgrade</button></td> 
 
     <td>2 gold</td> 
 
     <td>x2 Resting speed.</td> 
 
    </tr> 
 
    <tr id="up1"> 
 
     <td><button onclick="upgrade(2, 1)">Upgrade</button></td> 
 
     <td>3 gold</td> 
 
     <td>x2 Resting speed.</td> 
 
    </tr> 
 
    <tr id="up1"> 
 
     <td><button onclick="upgrade(2, 1)">Upgrade</button></td> 
 
     <td>4 gold</td> 
 
     <td>x2 Resting speed.</td> 
 
    </tr> 
 
    <tr id="up1"> 
 
     <td><button onclick="upgrade(2, 1)">Upgrade</button></td> 
 
     <td>5 gold</td> 
 
     <td>x2 Resting speed.</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

来源

2016-07-24 20:04:35

非常感谢你<3 – killereks

非常欢迎@killereks –

一个问题。当我取消选中复选框时，所有列都被放入第一列。之前：https：//gyazo.com/1d900c2a866def81a9054a1ea1a297b6之后：https://gyazo.com/af28cae287cfe11229f4ac965070afd3 – killereks

-1

<tr id="up1" data-price="2"> 
    <td><button onclick="upgrade(2, 1)">Upgrade</button></td> 
    <td>2 gold</td> 
    <td>x2 Resting speed.</td> 
</tr>

和JavaScript：

$(function() { 
    $('#canafford').change(function() { 
     if($(this).is(":checked")) { 
      $('tr').each(function() { 
       if ($(this).data('price') > myMoney) { 
        $(this).hide(); 
       } 
      }); 
     } else { 
      $('tr').show(); 
     } 
    } 
}

来源

2016-07-24 20:05:01

JQuery隐藏大于表中变量的元素

回答

相关问题