使用一个复选框选择对表进行多次更改 - 使用 id 和 class 更改一个 td 的类和父 tr 的样式

Question

我正在尝试根据“价格”的类类型更改第三个td ，同时使用相同的复选框将父tr更改为隐藏。 很确定这里没有使用addClass和removeClass 。

$(document).ready(function() {

    $("input[type=checkbox]").change(function()
    {
        var divId = $(this).attr("id");

        if ($(this).is(":checked")) {
            $("." + divId).show();
            $("." + addClass).countable();
        }
        else {
            $("." + divId).hide();
            $("." + removeClass).countable();
        }

    });
});

这是复选框：

<input class="my-activity" type="checkbox" value="42"> example<br/>
<input class="my-activity" type="checkbox" value="43"> example<br/>

这是我尝试更新的表的一部分：

</tr><tr class="42" style="display:none">
<td>example</td>
<td></td>
<td></td><td class="price">7800</td></tr><tr class="43" style="display:none">
<td>First Area</td>
<td></td>
<td></td><td class="price">6900</td></tr>

非常感谢任何帮助，并感谢您的查看。

Answer 1

似乎您想使用输入的值来生成类选择器，但您使用的是输入的 ID，而且addClass和removeClass是您在jQuery对象上调用的函数。 这是我认为您正在尝试做的一个示例：

 $(document).ready(function() { $("input[type=checkbox]").change(function() { var val = $(this).val(); var isChecked = $(this).is(":checked"); var $trElement = $('.' + val); var $tdPriceElement = $trElement.find('td.price'); $trElement.toggle(isChecked); $tdPriceElement.toggleClass('countable', isChecked); }); });

 .countable { color: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="my-activity" type="checkbox" value="42"/> example<br/> <input class="my-activity" type="checkbox" value="43"/> example<br/> <table> <tr class="42" style="display:none"> <td>example</td> <td></td> <td></td> <td class="price">7800</td> </tr> <tr class="43" style="display:none"> <td>First Area</td> <td></td> <td></td> <td class="price">6900</td> </tr> </table>

.toggle(...)函数根据作为参数传递的布尔值显示/隐藏元素， .toggleClass(..)函数根据作为第二个参数传递的布尔值添加/删除类名。

正如@zfrisch 所提到的，由于似乎每一行都有自己的类名（42、43、...），因此您可能应该改用 ID。