0

我在一个页面上有许多 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。上面的方法只是为了检查我已经得到的东西。

4

3 回答 3

2

试试这个 -演示

window.onload = function() {
    $('[id^=pref_id]').hide();
    $('.expand-textarea').show().click(function() {
        $(this).hide().next('div').show();
    });
};​
于 2012-11-01T12:38:13.917 回答
0

我会像这样处理这个问题：

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;
}​
于 2012-11-01T12:54:57.570 回答
0

您在所有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元素。

获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

例子

于 2012-11-01T12:38:24.533 回答