Question

好吧，我通常对jQuery很不错，但是这个正在努力。

基本上我有一个隐藏单个DIV（占位符）的click事件，然后显示另外两个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();
});

Answer 1

由于事件传播，当点击.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

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

1 个答案: