Question

我有一个包含许多表行的表。每一行都有一个“添加”按钮，该按钮具有为该记录指定的唯一ID。当我点击按钮时发送ajax请求，并且在成功时我需要隐藏此按钮并显示另一个按钮“删除”。

以下是代码：

    foreach ($this->routes as $route) {
    echo '  <tr>
                <td> <span class="label label-info">' . $route->id . '</span></td>
                <td> ' . $route->fromLocation . '</td>
                <td> ' . $route->toLocation . '</td>
                <td> ' . $route->startRoute . '</td>
                <td> ' . $route->endRoute . '</td>
                <td style="text-align:center;"> <span class="label label-important"> ' . $route->distance . '</span></td>
                <td class="show" id="' . $route->id . '" style="text-align:center;"> <i class="fa fa-binoculars" </td>
                <td> 
                    <button type="button" id="add'.$route->id.'" style="width:100%;" class="btn btn-success btn-mini"
                    data-route="' . $route->id . '" data-transire="' . $this->transire[0]->id . '">
                        <i class="fa fa-plus-square fa-fw"></i>' . $this->translate('Add') . '
                    </button> 
                    <button type="button" id="delete'.$route->id.'" style="width:100%;" class="btn btn-danger btn-mini"
                    data-route="' . $route->id . '" data-transire="' . $this->transire[0]->id . '">
                        <i class="fa fa-plus-square fa-fw"></i>' . $this->translate('Add') . '
                    </button> 
                </td>
            </tr> ';

和js：

        $('.btn').click(function() {
        alert($(this).attr('id'));

        var routeid = $(this).data("route");
        var transireid = $(this).data("transire");

        $.ajax({
            type: "POST",
            url: '/transire/addroute',
            data: {routeid: routeid, transireid: transireid},
            beforeSend: function() {

            },
            complete: function() {

            },
            success: function(response) {
                  // hide this button
                  // how to show the delete button here ????
            }
        })
    });

嗯，我不确定我是否在正确的轨道上。基本上我想得到另一个按钮的id并显示它。但是如何访问呢？谢谢！

Answer 1

在你的CSS中，为类hidden创建一个样式：

.hidden{display:none;}

在jquery中：

var id=this.id.replace(/\D+/,'');
$("#add"+id).addClass("hidden");
$("#delete"+id).removeClass("hidden");

replace(/\D+/,'')用空字符串替换所有非数字字符，从而删除所有非数字字符。但是，这仅在id为数字时有效，我假设。

您也可以使用toggleClass("hidden")

切换类，而不是添加和删除类

Answer 2

简单方法

首先在删除按钮中添加一个额外的课程，让我们说“删除按钮”＃39;所以你的按钮变成了：

<button type="button" id="delete'.$route->id.'" style="width:100%;" class="btn btn-danger btn-mini delete-button" data-route="' . $route->id . '" data-transire="' . $this->transire[0]->id . '">
    <i class="fa fa-plus-square fa-fw"></i>' . $this->translate('Add') . '
</button>

在您收到此评论的地方：

// hide this button
// how to show the delete button here ????

你可以把：

$(this).hide();
$(this).parent().find('.delete-button').show();

新代码的第一行清楚它正在做什么，只是隐藏按下的按钮。第二行，首先找到按下按钮的父元素，然后找到具有类＆＃39; delete-button＆＃39;的元素。然后它显示出来。

另一种方法，使用ID而不是类

更改元素的ID以在其间设置短划线，而不是：

id="add'.$route->id.'"
id="delete'.$route->id.'"

成功

id="add-'.$route->id.'"
id="delete-'.$route->id.'"

这将产生类似这样的结果（路由id = 5000）：

id="add-5000"
id="delete-5000"

你可以在成功方法中做到：

$(this).hide();
var routeId = $(this).attr('id').split('-').pop();
$('#delete-' + routeId).show();

这里我们取了当前按钮的id（添加），然后用破折号将其分割成一个包含2个元素的数组，首先是文本＆＃34;添加＆＃34;路由id。然后我们弹出路由ID，然后用它来查找删除按钮元素。

Answer 3

将context选项传递给$.ajax()方法，然后您可以轻松定位特定行：

$.ajax({
    context: this, //< context set on clicked button
    type: "POST",
    url: '/transire/addroute',
    data: {
        routeid: routeid,
        transireid: transireid
    },
    beforeSend: function () {

    },
    complete: function () {

    },
    success: function (response) {
        $(this).add($(this).closest('tr').find('.btn-danger')).toggle();
    }
});

问题： 你真的需要HTML中的所有这些ID吗？！

使用jquery显示和隐藏2个按钮

3 个答案: