Question

我在页面上有许多div（包含ace编辑器）。编辑器本身应该只在请求时出现，所以我在每个div上面添加了一个锚点，并带有一个单击函数来公开它。

问题在于，所有这些隐藏的div都没有隐藏，而不仅仅是我想要显示的div。谁能发现错误？

HTML

<p>Description of block one:</p>
<a class="expand-textarea" style="display: none" href="#">Click to Edit</a>
<div id="pref_id1_cont" style="position:relative; height:250px; width: 100%;">
    <p>Ace Editor 1 goes here!</p>
</div>

<p>Description of block 2: </p> 
<a class="expand-textarea" style="display: none" href="#">Click to Edit</a>
<div id="pref_id2_cont" style="position:relative; height:250px; width: 100%;">
    <p>Ace Editor 2 goes here!</p>
</div>

JS

window.onload = function() {
    $('# pref_id1_cont').hide();
    $('.expand-textarea').show().click(function() {
        $(this).hide();
        $('#pref_id1_cont').show();
    });

    $('#pref_id2_cont').hide();
    $('.expand-textarea').show().click(function() {
        $(this).hide();
        $('#pref_id2_cont').show();
    });
};

JSFiddle

对于如何以更简单的方式执行此操作的任何建议也将非常感激。目前这是一些我正在更新的旧代码，它依赖于大量的模板。从长远来看，我希望动态创建编辑器块，而不是为每个块复制js。上述方法只是为了检查我已经得到的东西。

Answer 1

试试这个 - DEMO

window.onload = function() {
    $('[id^=pref_id]').hide();
    $('.expand-textarea').show().click(function() {
        $(this).hide().next('div').show();
    });
};

Answer 2

您在所有a标记上使用相同的类，因此当单击一个时，每个事件处理程序都会触发。尝试这样的事情：

window.onload = function() {
    $('#pref_id1_cont').hide();
    $('#pref_id2_cont').hide();
    $('#pref_id3_cont').hide();

    $('.expand-textarea').click(function() {
        $(this).next("div").show();
    });
};

使用.next()，您可以在div之后获得下一个.expand-textarea。在这种情况下，它是pref_id#_cont元素。

获取该组中每个元素的紧随其后的兄弟匹配的元素。如果提供了选择器，它将检索下一个选择器兄弟姐妹只有匹配那个选择器。

<强> EXAMPLE

Answer 3

我会解决这样的问题：

http://jsfiddle.net/KTDyr/14/

HTML

<div class="con">
    <p class="expand-textarea-con">        
        Show the following HTML in the OPAC, 
        <a class="expand-textarea" href="#">Click to Edit</a>
    </p>
    <div class="expanded-textarea" style="display:none">
        <p>Ace Editor 1 goes here!</p>
        <p class="expanded-textarea-close">Close</p>
    </div>
</div>

的jQuery

$(".expand-textarea").click(function() {
    $(this).parent().parent().find('.expanded-textarea').show();
    $(this).parent().hide();

});    

$(".expanded-textarea-close").click(function() {
    $(this).parent().hide();
    $(this).parent().parent().find('.expand-textarea-con').show();

});

CSS

.expand-textarea {
display:inline;
color:blue;
text-decoration:underline;
cursor:pointer;
}

.expanded-textarea {
width: 100%; 
height:250px;    
position:relative;
background:orange;    
}

.expanded-textarea-close {
color:blue;
text-decoration:underline;
cursor:pointer;
}

jQuery选择器在单击函数中的行为不符合预期？

HTML

JS

3 个答案: