Question

我有一些按钮可以生成弹出窗口。他们的班级是.btn-popover-link。当我点击时，我可以看到要填写的新表格。还有一个按钮＆＃34;添加不同的地方＆＃34;。当我点击它时，我会收到更多要填写的字段，我可以点击＆＃34;删除这个地方＆＃34;然后他们再次躲起来当我点击第一个添加新地点，然后我移动到下一个，我看不到＆＃34;添加不同的地方＆＃34;按钮，实际上我根本看不到任何按钮。

$('.btn-popover-link').on('click', function () {
    $(document).ready(function () {
        $('.place-hidden-different').hide();
        $('.delete-different-place-btn').hide();

        $('.add-different-place-btn').on('click', function () {
            $('.place-hidden-different').show();
            $('.add-different-place-btn').hide();
            $('.delete-different-place-btn').show();
        });

        $('.delete-different-place-btn').on('click', function () {
            $('.place-hidden-different').hide();
            $('.add-different-place-btn').show();
            $('.delete-different-place-btn').hide();
        });
    });
});

这可能是因为它记得我点击了＃34;添加地点＆＃34;按钮，所以它隐藏了。但是这段代码怎么会出错呢？据我所知，在每次点击时，在下一个弹出窗口的每个开口上，所有功能都可以执行，因此它们不会在不同的弹出窗口之间连接。我错了吗？我能做什么？我想分别编辑每一个popover，一个人可以在popover no.1中添加不同的地方，但他决定不在popover no.2等。

编辑：该部分的HTML：

<div>
                        <?= 
                        Html::button(Yii::t('app', 'Add new place'), [
                          //  'id' => "add-different-place-btn",
                            'class' => 'btn btn-success add-different-place-btn',
                        ])
                        ?>
                        <?= 
                        Html::button(Yii::t('app', 'Delete new place'), [
                         //   'id' => "delete-different-place-btn",
                            'class' => 'btn btn-success delete-different-place-btn',
                        ])
                        ?>
                    </div>
                    <br />
                    <div class="place-hidden-different">
                        <div class="place-name-hidden-2">
                            <?= $form->field($place, "[{$index}]name")->textInput()->label(Yii::t('app', 'New place')) ?>
                        </div>
                        <div class="place-city-hidden-2">
                            <?= $form->field($place, "[{$index}]city")->textInput() ?>
                        </div>
                        <div class="place-street-hidden-2">
                            <?= $form->field($place, "[{$index}]street")->textInput() ?>
                        </div>
                        <div class="place-postcode-hidden-2">
                            <?= $form->field($place, "[{$index}]post_code")->textInput() ?>
                        </div> 
                    </div>

Answer 1

你不应该在事件中附加事件也不能在事件内部使用就绪函数尝试发布事件并使用事件委派on()来处理动态添加的新元素$(this)定位当前单击的元素，您的代码应该有效：

$(document).ready(function () {
    $('body').on('click', '.btn-popover-link', function () {
        $('.place-hidden-different').hide();
        $('.delete-different-place-btn').hide();
    });

    $('body').on('click', '.add-different-place-btn', function () {
        $(this).hide();

        $('.place-hidden-different').show();
        $('.delete-different-place-btn').show();
    });

    $('body').on('click', '.delete-different-place-btn', function () {
        $(this).hide();

        $('.place-hidden-different').hide();
        $('.add-different-place-btn').show();
    });
});

希望这有帮助。

Answer 2

Zakaria Acharki的answer几乎让你到了那里。你需要的最后一部分是你不想隐藏所有按钮和位置，而只是隐藏相关的按钮和位置。我假设您的问题中的HTML重复多次，对吗？假设你也给div一个班级，比如places-container。然后，您只能在同一个容器中定位.place-hidden-different和.add-different-place-btn，如下所示。

$(function() {
  $('body')
    .on('click', '.btn-popover-link', function() {
      var $container = $(this).closest('.places-container');
      $container.find('.place-hidden-different').hide();
      $container.find('.delete-different-place-btn').hide();
    })
    .on('click', '.add-different-place-btn', function() {
      $(this).hide();

      var $container = $(this).closest('.places-container');
      $container.find('.place-hidden-different').show();
      $container.find('.delete-different-place-btn').show();
    })
    .on('click', '.delete-different-place-btn', function() {
      $(this).hide();

      var $container = $(this).closest('.places-container');
      $container.find('.place-hidden-different').hide();
      $container.find('.add-different-place-btn').show();
    });
});

这里的关键部分是，我们不是选择具有类place-hidden-different的所有元素，而是在容器中选择它们。使用.closest找到容器，然后仅使用.find在该容器中搜索。

显示/隐藏弹出窗口之间的相应关联

2 个答案: