288

इसे दबाने के बाद मैं 'एडिट-लिंक' को कैसे छिपा सकता था? और जब मैं संपादन संपादित करता हूं तो क्या मैं "लोरेम इप्सम" पाठ छिपा सकता हूं?

<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>

javascript

— nortaga
स्रोत

455

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>

स्निपेट का विस्तार करें

— साचा गैली
स्रोत

5

आप क्यों जोड़ते return falseहैं onclick?

— मिडास

11

जावास्क्रिप्ट ऑनक्लिक रिटर्न गलत

— Sascha Galley

1

हाँ मैं जानता हूँ। लेकिन मैं सोच रहा था क्योंकि आप लिंक के रूप में # का उपयोग करने की आवश्यकता नहीं है।

— मिडास

10

यदि आप जावास्क्रिप्ट को urdomain.com/.com/ से yourdomain.com/# ... में बदलना नहीं चाहते हैं, तो इसकी आवश्यकता हो सकती है ... इसके अलावा, विंडो की स्क्रॉलिंग कूद सकती है, या कोई अन्य गैर-विचारित समस्या हो सकती है।

— साशा गैली

1

मुझे परीक्षण के लिए एक लिंक याद है कि आप यहाँ क्यों कोशिश कर सकते हैं: konzertagentur-koerner.de/test लेकिन अच्छे कोड के लिए धन्यवाद

— Timo

69

आप तत्वों को दिखाने / छिपाने के लिए इस कोड का उपयोग कर सकते हैं:

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

नोट अंतर के बीच style.visibilityऔर style.displayहै जब दृश्यता का उपयोग कर: के विपरीत प्रदर्शन छिपा: कोई नहीं, टैग दिखाई नहीं देता है, लेकिन अंतरिक्ष पृष्ठ पर इसके लिए आवंटित किया जाता है। टैग प्रदान किया गया है, यह सिर्फ पृष्ठ पर नहीं देखा गया है।

अंतर देखने के लिए यह लिंक देखें ।

— ए-Sharabiani
स्रोत

1

किस बारे में .hidden? क्या अब आप इसे कैसे व्यवहार करते हैं?

— जिमासुन

41

मैं आपको JQuery विकल्प सुझाना चाहूंगा ।

$("#item").toggle();
$("#item").hide();
$("#item").show();

उदाहरण के लिए:

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

— Mc-
स्रोत

60

कभी-कभी JQuery आवश्यक नहीं है; यदि यह केवल एक चीज है जो आपको एक पृष्ठ पर करने की आवश्यकता है, तो पुस्तकालय को लोड करने के ओवरहेड को संक्षिप्त जावास्क्रिप्ट लिखने की आवश्यकता से बहुत अधिक है।

— ग्लेनग

2

ऐसा लगता है कि प्रदर्शन के संदर्भ में छिपाने () और jquery दृश्यता के तरीके प्रदर्शन के लिहाज से एक अच्छा विकल्प नहीं हैं, जैसा कि Addy Osmani

— एमिलियो

1

हालांकि यह काम कर सकता है लेखक jQuery का उपयोग नहीं कर रहा है, इसलिए यह प्रश्न के प्रासंगिक उत्तर की तरह प्रतीत नहीं होता है।

— ए। वेन्टजेल

36

मैं इसके लिए तत्वों को छिपाने का सुझाव दूंगा (जैसा कि अन्य ने सुझाव दिया है):

document.getElementById(id).style.display = 'none';

लेकिन तत्वों को दिखाई देने के लिए, मैं यह सुझाव दूंगा (बजाय प्रदर्शन = 'ब्लॉक'):

document.getElementById(id).style.display = '';

कारण यह है कि प्रदर्शन = 'ब्लॉक' का उपयोग करने से तत्व के बगल में अतिरिक्त मार्जिन / व्हाट्सएप हो रहा है, जिस पेज पर मैं काम कर रहा हूं, वह IE (11) और क्रोम (संस्करण 43.0.2357.130 मीटर) दोनों में दिखाई दे रहा है।

जब आप पहली बार क्रोम में एक पेज लोड करते हैं, तो बिना स्टाइल एट्रीब्यूट के एक तत्व डोम इंस्पेक्टर में इस तरह दिखाई देगा:

element.style {
}

मानक जावास्क्रिप्ट का उपयोग करके इसे छिपाना यह अपेक्षा के अनुरूप बनाता है:

element.style {
  display: none;
}

प्रदर्शन = 'ब्लॉक' का उपयोग करके इसे फिर से दिखाई देना इसे इसे बदल देता है:

element.style {
  display: block;
}

जो मूल रूप से ऐसा नहीं था। यह बहुत अच्छी तरह से मामलों के बहुमत में कोई फर्क नहीं कर सका। लेकिन कुछ मामलों में, यह असामान्यताओं का परिचय देता है।

प्रदर्शन = '' का उपयोग करना इसे DOM निरीक्षक में इसकी मूल स्थिति में पुनर्स्थापित करता है, इसलिए यह बेहतर दृष्टिकोण की तरह लगता है।

— बेन ओसबोर्न
स्रोत

हां! blockविकल्प का उपयोग नहीं करना बेहतर है । सोच रहा था कि इस प्रोप का डिफ़ॉल्ट मान क्या था: p

18

आप तत्व की छिपी संपत्ति का उपयोग कर सकते हैं:

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false

— nabeghe
स्रोत

ऊह! मुझे यह पसंद है क्योंकि आप display=""आजकल अलग-अलग मूल्य रख सकते हैं ।

— एंड्रयू

दुर्भाग्य से, आप सीएसएस स्टाइलशीट में इसका उपयोग नहीं कर सकते, ऐसा लगता है। इस प्रकार, आपको या तो इसे HTML में सेट करना होगा या display: none;आदि का उपयोग करना होगा

— एंड्रयू

कैविएट: सीएसएस displayसंपत्ति सेट होने पर इस संपत्ति को अनदेखा किया जाता है।

— जेसनवॉफ

1

यदि आप displayगुण को उस तत्व में सेट करना चाहते हैं, जब उसके पास hiddenविशेषता नहीं है, तो इसे इस तरह से लक्षित करें:.my-el:not([hidden]) { display: flex }

— गीताकार

13

आपको व्यवहार के लिए जेएस और दृश्य कैंडी के लिए सीएसएस जितना संभव हो उतना सोचना चाहिए। अपने 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>

आप सीएसएस नियमों का उपयोग करके एक दृश्य से दूसरे में स्विच कर सकेंगे:

td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
    display : none;
}

और जेएस कोड जो दो वर्गों के बीच स्विच करता है

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

— sitifensys
स्रोत

9

हालांकि इस सवाल का जवाब पहले भी कई बार दिया जा चुका है, लेकिन मुझे लगा कि मैं इसे भविष्य के उपयोगकर्ताओं के लिए अधिक संपूर्ण और ठोस जवाब के साथ जोड़ूंगा। मुख्य उत्तर समस्या को हल करता है, लेकिन मेरा मानना है कि चीजों को दिखाने / छिपाने के कुछ विभिन्न तरीकों को जानना / समझना बेहतर हो सकता है।

।

Css () का उपयोग करके डिस्प्ले बदलना

यह वह तरीका है जो मैं तब तक करता था जब तक मुझे इनमें से कुछ अन्य तरीके नहीं मिल जाते।

जावास्क्रिप्ट:

$("#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/

।

AddClass () / removeClass () का उपयोग करके डिस्प्ले बदलना

इस एक के लिए उदाहरण स्थापित करते हुए, मैं वास्तव में इस पद्धति पर कुछ खामियों में भाग गया, जो इसे बहुत अविश्वसनीय बनाता है।

सीएसएस / जावास्क्रिप्ट:

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

पेशेवरों:

छिप जाता है .... कभी-कभी। उदाहरण पर p1 देखें।
अनहाइड करने के बाद, यह पिछले प्रदर्शन मान का उपयोग करके वापस आ जाएगा .... कभी-कभी। उदाहरण पर p1 देखें।
यदि आप सभी छिपी हुई वस्तुओं को पकड़ना चाहते हैं, तो आपको बस करने की जरूरत है $(".hidden")।

विपक्ष:

प्रदर्शित मूल्य को सीधे html पर सेट किए जाने पर छिपाया नहीं जाता है। उदाहरण पर P2 का संदर्भ लें।
अगर सीएसएस () का उपयोग करके जावास्क्रिप्ट में डिस्प्ले सेट किया गया है तो छिपाया नहीं जाता है। उदाहरण पर p3 देखें।
थोड़ा और कोड क्योंकि आपको एक सीएसएस विशेषता को परिभाषित करना है।

उदाहरण: https://jsfiddle.net/476oha8t/8/

।

टॉगल का उपयोग करके प्रदर्शन बदलना ()

जावास्क्रिप्ट:

$("element_to_hide").toggle();  // To hide and to unhide

पेशेवरों:

हमेशा काम करता है।
आपको इस बारे में चिंता करने की अनुमति नहीं देता है कि स्विच करने से पहले यह किस राज्य में था। इसके लिए स्पष्ट उपयोग .... टॉगल बटन के लिए है।
छोटा और सरल।

विपक्ष:

यदि आपको यह जानने की जरूरत है कि किस राज्य में स्विच किया जा रहा है ताकि वह सीधे संबंधित न हो, तो आपको यह पता लगाने के लिए और अधिक कोड (एक स्टेटमेंट) जोड़ना होगा कि वह किस राज्य में है।
पिछले चोर के समान, यदि आप ऐसे निर्देशों का एक सेट चलाना चाहते हैं जिसमें छिपाने के उद्देश्य के लिए टॉगल () शामिल है, लेकिन आप नहीं जानते कि क्या यह पहले से ही छिपा हुआ है, तो आपको एक चेक (एक बयान) जोड़ना होगा पहले पता लगाने के लिए और अगर यह पहले से ही छिपा हुआ है, तो छोड़ें। उदाहरण के p1 का संदर्भ लें।
पिछले 2 विपक्ष से संबंधित, टॉगल () का उपयोग करके ऐसी चीज़ के लिए जो विशेष रूप से छुपा रही है या विशेष रूप से दिखा रही है, दूसरों को आपके कोड को पढ़ने के लिए भ्रमित कर सकता है क्योंकि वे नहीं जानते कि वे किस तरह से टॉगल करेंगे।

उदाहरण: https://jsfiddle.net/cxcawkyk/1/

।

छिपाना () / शो () का उपयोग करके प्रदर्शन बदलना

जावास्क्रिप्ट:

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

पेशेवरों:

हमेशा काम करता है।
अनहाइड करने के बाद, यह पिछले प्रदर्शन मान का उपयोग करके वापस आ जाएगा।
आपको हमेशा पता चलेगा कि आप किस राज्य को स्वैप कर रहे हैं:
1. यदि राज्य बदलते हैं तो राज्यों को बदलने से पहले दृश्यता की जांच करने के लिए बयानों को जोड़ने की आवश्यकता नहीं है।
2. अपने कोड को पढ़ने वाले अन्य लोगों को भ्रमित न करें कि आप किस राज्य में स्विच कर रहे हैं, यदि राज्य मायने रखता है।
सहज ज्ञान युक्त।

विपक्ष:

यदि आप एक टॉगल की नकल करना चाहते हैं, तो आपको पहले राज्य की जांच करनी होगी और फिर दूसरे राज्य में स्विच करना होगा। इनके बजाय टॉगल () का उपयोग करें। उदाहरण के P2 का संदर्भ लें।

उदाहरण: https://jsfiddle.net/k0ukhmfL/

।

कुल मिलाकर, जब तक आपको विशेष रूप से टॉगल करने की आवश्यकता न हो, मैं छिपाने के लिए सबसे अच्छा () / शो () कहना चाहूंगा। मुझे आशा है कि आपको यह जानकारी उपयोगी लगी होगी।

— Macainian
स्रोत

9

आपने अपने उत्तर में jQuery का उपयोग करने का निर्णय क्यों लिया?

— ड्रेक्स_

@Draex_ हाँ मुझे लगता है कि वह चाहता था जावास्क्रिप्ट वह नहीं था? सच कहूं तो, मुझे अपने जवाब को इस धागे में स्थानांतरित करने के लिए मजबूर होना पड़ा क्योंकि एक और धागा माना जाता था। मैं बस लोगों को कुछ उपयोगी जानकारी देने की कोशिश कर रहा था, लेकिन ऐसा करने के लिए कोई जगह नहीं है।

— २०:

इसके अलावा वहाँ है$("#element_to_hide").hidden = true/false

— पी i

6

बस सभी तत्वों के लिए खुद को छिपाने और दिखाने के तरीके बनाएं, निम्नानुसार

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()">

— कोस जसपर्स
स्रोत

5

मैं जावास्क्रिप्ट की सिफारिश करता हूं, क्योंकि इसकी अपेक्षाकृत तेज और अधिक निंदनीय है।

    <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>

3

यदि आप इसे तालिका में उपयोग कर रहे हैं तो इसका उपयोग करें: -

  <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>

— phpdroid
स्रोत

1

वनिला जेएस फॉर क्लासेस एंड आईडी

आईडी द्वारा

document.querySelector('#element-id').style.display = 'none';

वर्ग द्वारा (एकल तत्व)

document.querySelector('.element-class-name').style.display = 'none';

कक्षा द्वारा (एकाधिक तत्व)

for (let elem of document.querySelectorAll('.element-class-name')) {
    elem.style.display = 'none';
}

— क्रिस हेस
स्रोत

जावास्क्रिप्ट छिपाने / शो तत्व

Css () का उपयोग करके डिस्प्ले बदलना

AddClass () / removeClass () का उपयोग करके डिस्प्ले बदलना

टॉगल का उपयोग करके प्रदर्शन बदलना ()

छिपाना () / शो () का उपयोग करके प्रदर्शन बदलना

वनिला जेएस फॉर क्लासेस एंड आईडी