如果jQuery.show(）在上一个事件中使用，则jQuery不会隐藏DIV

jQuery not hiding DIVs if jQuery.show() used in previous event

本文关键字：jQuery DIV 隐藏 show 事件 上一个 如果      更新时间：2023-09-26

好吧，我通常对jQuery很在行，但这一个正在让我头疼。

基本上，我有一个点击事件，它隐藏了一个DIV（占位符），然后显示了另外两个DIV。然后，当我点击其中一个控制按钮来更改显示的主DIV（通过隐藏所有的DIV，然后显示我想要的）时，hide（）就不起作用了。

这有点难以解释，所以我有一个jsFiddle，它显示了这个问题：jsFiddle

在小提琴中，应该发生的是，当你点击"点击我"文本时，它应该正确设置DIV。然后单击框（1、2或3），应将文本更改为"项目1"、"项目2"或"项目3"。正如您所看到的，"项目1"DIV从未被隐藏，因为这是在初始布局事件中显示的DIV。如果你在JavaScript中注释掉第5行，一切都会正常工作，但初始布局不正确（我希望默认显示"项目1"）。

显然，这是我实际工作的一个大大简化的版本。

有人遇到过这个问题，知道问题出在哪里吗？

部分代码：

HTML:

<div id="newinput">
<div class="inputmode">
    <div class="placeholder">CLICK ME</div>
    <div class="modeitem item1">Item 1</div>
    <div class="modeitem item2">Item 2</div>
    <div class="modeitem item3">Item 3</div>
</div>
<div class="controls">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

JavaScript:

$('#newinput').click(function () {
    var im = $(this).children('.inputmode');
    var ph = im.children('.placeholder').html();
    im.children('.placeholder').hide();
    im.children('div.item1').show();
    $(this).children('.controls').show();
});
$('#newinput .controls .item').click(function () {
    var item = 'item' + $(this).html();
    var im = $('#newinput').children('.inputmode');
    im.children('div').hide();
    im.children('.modeitem.' + item).show();
});

这是因为事件传播，当单击.item时，它也会触发#newinput单击句柄。

作为解决方案，只将第一个处理程序注册到placeholder元素

$('#newinput .inputmode .placeholder').click(function () {
    var im = $(this).closest('.inputmode');
    var ph = im.children('.placeholder').html();
    im.children('.placeholder').hide();
    im.children('div.item1').show();
    im.next('.controls').show();
});
$('#newinput .controls .item').click(function (e) {
    var item = 'item' + $(this).html();
    var im = $('#newinput').children('.inputmode');
    im.children('div').hide();
    im.children('.modeitem.' + item).show();
});

演示：Fiddle

相关文章：