Question

我有以下代码：

<span>2</span><button onClick="//show quantity_update form">edit</button> 
<div id="qty_update" class="hidden">
 <form method="post">
   <input type="number" />
   <button type="submit" >update</button>
 </form>
</div>

因此，当我的页面加载时，quantity_update表格div不可见。

我想在点击编辑按钮时显示div。

我正在努力弄清楚如何“链接”quantity_update div和编辑按钮，这样当我点击其中一个数量编辑按钮时，我就不显示订单项上的所有div。

因此，例如这段代码不起作用：

$('.hidden').removeClass('hidden');

因为这会使所有隐藏的div可见。

如果我可能以某种方式获得编辑按钮的id和div增量，然后做一些魔术来确定要显示的div，我认为这会有所帮助。但我不知道该怎么做。

Answer 1

将span和div包含在另一个div中。在按钮中添加一个类。然后你可以做类似

的事情

$(document).ready(function() {
    $('.myButton').click(function() {
        $(this).parent().find(".hidden").removeClass('hidden');
    });
});

虽然我必须说，你可以考虑只设置display / visible属性，而不是直接删除类。在这种情况下，您可以更改属性，因为您仍然可以使用类名访问元素。完全删除课程可能会让你没有任何东西可以找到div。

Answer 2

使用

$('#qty_update').removeClass('hidden');

即。处理个人身份，而不是所有隐藏的课程。

请注意，通常在使用jQuery时，您不会在html代码中使用onClick事件。相反，您需要为$(document).ready(function() {...});函数中的click事件设置处理程序。像：

在你的html中，为按钮添加一个id：

<button id="myButton1">

然后在<script>部分添加：

$(document).ready(function() {
    $('#myButton1').click(function() {
        $('#qty_update').removeClass('hidden');
    });
});

使用jquery在购物车中显示和隐藏更新字段

2 个答案: