「編集」リンクを押した後、それを非表示にするにはどうすればよいですか？また、編集ボタンを押すと「lorem ipsum」というテキストを非表示にできますか？
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
<td class="post">
<a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</td>回答:
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}<td class="post">
<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>このコードを使用して、要素を表示/非表示にすることもできます。
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";注との違いはstyle.visibility、style.displaydisplay：noneとは異なり、visibility：hiddenを使用する場合です。タグは表示されませんが、ページ上にタグが割り当てられます。タグはレンダリングされますが、ページには表示されません。
違いを確認するには、このリンクを参照してください。
.hiddenですか？あなたは今それがどのように振る舞うのですか？
私はあなたにjQueryオプションを提案したいと思います。
$("#item").toggle();
$("#item").hide();
$("#item").show();例えば：
$(document).ready(function(){
$("#item").click(function(event){
//Your actions here
});
});要素を非表示にするためにこれをお勧めします（他の人が提案したように）：
document.getElementById(id).style.display = 'none';しかし、要素を表示するには、これを推奨します（display = 'block'の代わりに）：
document.getElementById(id).style.display = '';その理由は、display = 'block'を使用すると、現在作業しているページのIE（11）とChrome（バージョン43.0.2357.130 m）の両方で要素の横に追加のマージン/空白が表示されるためです。
Chromeで最初にページを読み込むとき、style属性のない要素はDOMインスペクターで次のように表示されます。
element.style {
}標準のJavaScriptを使用して非表示にすると、予想どおり次のようになります。
element.style {
display: none;
}display = 'block'を使用して再度表示すると、次のように変更されます。
element.style {
display: block;
}元々あったのと同じではありません。これは、ほとんどの場合、まったく違いを生じさせません。しかし、いくつかのケースでは、それは異常をもたらします。
display = ''を使用すると、DOMインスペクタで元の状態に復元されるため、より良いアプローチのようです。
要素の隠しプロパティを使用できます：
document.getElementById("test").hidden=true;
document.getElementById("test").hidden=falsedisplay=""今日異なる値を持っているかもしれないからです。
display: none;など
displayプロパティが設定されている場合、このプロパティは無視されます。
display、それが持っていないときの要素にプロパティをhidden属性を、このようにそれをターゲット：.my-el:not([hidden]) { display: flex }
JSは振る舞いを考え、CSSはビジュアルキャンディーをできるだけ考えるべきです。HTMLを少し変更することにより：
<td class="post">
<a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
<span id="answer1" class="post-answer">
<textarea rows="10" cols="115"></textarea>
</span>
<span class="post-text" id="text1">Lorem ipsum ... </span>
</td>CSSルールを使用するだけで、あるビューから別のビューに切り替えることができます。
td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
display : none;
}そして、2つのクラスを切り替えるJSコード
<script type="text/javascript">
function showStuff(aPostTd) {
aPostTd.className="post-editing";
}
</script>この質問は以前から何度も回答されていますが、将来のユーザーのために、より完全で確実な回答を付け加えたいと思いました。主な答えは問題を解決しますが、物事を表示/非表示にするさまざまな方法のいくつかを知っている/理解する方が良いかもしれないと思います。
。
これは、他の方法がいくつか見つかるまで私が使用していた方法です。
JavaScript：
$("#element_to_hide").css("display", "none"); // To hide
$("#element_to_hide").css("display", ""); // To unhide長所：
短所：
$("#element_to_hid").css("display", "inline");それ以外の場合は、デフォルトで「ブロック」または強制的に適用されるものに戻ります。例： https //jsfiddle.net/4chd6e5r/1/
。
この例を設定しているときに、実際にこの方法にいくつかの欠陥があり、非常に信頼性が低くなっています。
Css / Javascript：
.hidden {display:none}
$("#element_to_hide").addClass("hidden"); // To hide
$("#element_to_hide").removeClass("hidden"); // To unhide長所：
$(".hidden")。短所：
例：https : //jsfiddle.net/476oha8t/8/
。
JavaScript：
$("element_to_hide").toggle(); // To hide and to unhide長所：
短所：
例：https : //jsfiddle.net/cxcawkyk/1/
。
JavaScript：
$("#element_to_hide").hide(); // To hide
$("#element_to_hide").show(); // To show長所：
短所：
例：https : //jsfiddle.net/k0ukhmfL/
。
全体として、特にトグルである必要がない限り、hide（）/ show（）が最適です。この情報がお役に立てば幸いです。
$("#element_to_hide").hidden = true/false
次のように、すべての要素に対してメソッドhideおよびshowを自分で作成するだけです
Element.prototype.hide = function() {
this.style.display = 'none';
}
Element.prototype.show = function() {
this.style.display = '';
}この後、これらの例のように、通常の要素識別子を持つメソッドを使用できます。
document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();または：
<img src="removeME.png" onclick="this.hide()">Javascriptをお勧めします。これは、比較的高速で柔軟なためです。
<script>
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>
<td class="post">
<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>テーブルで使用している場合は、次のようにしてください。
<script type="text/javascript">
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'table-row';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>
<td class="post">
<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>
return falseするのonclickですか？