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

জাভাস্ক্রিপ্ট অনক্লিক রিটার্ন মিথ্যা

— গ্যালি

1

হ্যা আমি জানি. তবে আমি ভাবছিলাম যে আপনি যদি লিঙ্ক হিসাবে # ব্যবহার করেন তবে এটির দরকার নেই।

— মিডাস

10

এটি আপনি জাভাস্ক্রিপ্টটিকে url আপনার yourmain.com থেকে yourdomain.com/# এ পরিবর্তন করতে না দিতে চাইলে প্রয়োজন হতে পারে ... তদুপরি, উইন্ডোটির স্ক্রোলিং লাফিয়ে উঠতে পারে বা অন্য কোনও বিবেচনা না করা সমস্যা দেখা দিতে পারে।

— স্যাশা গ্যালি

1

Konzertagentur-koerner.de/test কিন্তু ধন্যবাদ ভাল কোডের জন্য: আমি যে তুমি এখানে কেন চেষ্টা করে দেখতে পারেন পরীক্ষার জন্য একটি লিঙ্ক মিস্

— টিমো

69

আপনি উপাদানগুলি প্রদর্শন / আড়াল করতে এই কোডটি ব্যবহার করতে পারেন:

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

দ্রষ্টব্য : দৃশ্যমানতা ব্যবহার করার সময় style.visibilityএবং এর মধ্যে পার্থক্যটি style.display: প্রদর্শনের বিপরীতে লুকানো: কোনওটিই নয়, ট্যাগটি দৃশ্যমান নয়, তবে পৃষ্ঠায় স্থানটির জন্য বরাদ্দ দেওয়া হয়। ট্যাগটি রেন্ডার করা হয়েছে, এটি কেবল পৃষ্ঠায় দেখা যায় না।

পার্থক্যগুলি দেখতে এই লিঙ্কটি দেখুন ।

— এ-Sharabiani
সূত্র

1

কি হবে .hidden? আপনি এখন এটি আচরণ করে?

— jimasun

41

আমি আপনাকে JQuery বিকল্পটি সুপারিশ করতে চাই ।

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

উদাহরণ স্বরূপ:

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

— Mc-
সূত্র

60

কখনও কখনও JQuery প্রয়োজন হয় না; যদি কোনও পৃষ্ঠায় আপনার কেবল এটি করতে হয় তবে গ্রন্থাগারটি লোড করার ওভারহেড সংক্ষিপ্ত জাভাস্ক্রিপ্ট লেখার প্রয়োজনের তুলনায় অনেক বেশি।

— গ্লেনজি

2

অ্যাডি ওসমানী এখানে ব্যাখ্যা করেছেন বলে মনে হয় যে সাধারণভাবে লুকানো () এবং জ্যাকোরির দৃশ্যমানতা পদ্ধতিগুলি পারফরম্যান্সের পক্ষে কোনও ভাল বিকল্প নয়: স্পিকারডেক.com

— এমিলিও

1

যদিও এটি কাজ করতে পারে লেখক jQuery ব্যবহার করছেন না তাই এটি প্রশ্নের কোনও প্রাসঙ্গিক উত্তর বলে মনে হচ্ছে না।

— উ। ভেন্টজেল

36

আমি উপাদানগুলি গোপন করার জন্য এটি প্রস্তাব করব (যেমন অন্যরা পরামর্শ দিয়েছেন):

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

তবে উপাদানগুলিকে দৃশ্যমান করার জন্য, আমি এটি প্রস্তাব করব (ডিসপ্লে = 'ব্লক' এর পরিবর্তে):

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

কারণটি হ'ল প্রদর্শন = 'ব্লক' ব্যবহারের ফলে আমি যে পৃষ্ঠায় কাজ করছি তাতে আইই (11) এবং ক্রোম (সংস্করণ 43.0.2357.130 মি) উভয়টিতে উপাদানটির পাশের অতিরিক্ত মার্জিন / হোয়াইটস্পেসের উপস্থিতি ঘটছে।

আপনি যখন ক্রোমে প্রথম কোনও পৃষ্ঠা লোড করবেন, তখন কোনও স্টাইল বৈশিষ্ট্য ছাড়াই একটি উপাদান ডিওএম ইন্সপেক্টরটিতে প্রদর্শিত হবে:

element.style {
}

প্রত্যাশা অনুযায়ী মানক জাভাস্ক্রিপ্ট ব্যবহার করে এটি আড়াল করা এটিকে এটি করে তোলে:

element.style {
  display: none;
}

প্রদর্শন = 'ব্লক' ব্যবহার করে এটিকে আবার দৃশ্যমান করা এটিকে এতে পরিবর্তন করে:

element.style {
  display: block;
}

যা মূলত এটির মতো নয়। এটি বেশিরভাগ ক্ষেত্রেই কোনও পার্থক্য করতে পারে না। তবে কিছু ক্ষেত্রে এটি অস্বাভাবিকতাকে প্রবর্তন করে।

ডিসপ্লে = '' ব্যবহার করে এটি ডিওএম ইন্সপেক্টরের কাছে এটির মূল অবস্থায় ফিরে পাবে, সুতরাং এটি আরও ভাল পদ্ধতির মতো বলে মনে হচ্ছে।

— বেন ওসবার্ন
সূত্র

হাঁ! blockঅপশনটি ব্যবহার না করা ভাল । ভাবছিলাম যে এই

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

আপনার আচরণের জন্য জেএস, এবং যথাসম্ভব ভিজ্যুয়াল ক্যান্ডির জন্য সিএসএস ভাবা উচিত। আপনার এইচটিএমএল কিছুটা পরিবর্তন করে:

<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

যদিও এই প্রশ্নের উত্তর আগেও বহুবার দেওয়া হয়েছে, আমি ভেবেছিলাম ভবিষ্যতে ব্যবহারকারীদের জন্য আরও সম্পূর্ণ এবং দৃ solid় উত্তর দিয়ে আমি এতে যুক্ত করব। মূল উত্তরটি সমস্যার সমাধান করে তবে আমি বিশ্বাস করি যে জিনিসগুলি দেখানোর / আড়াল করার বিভিন্ন উপায় সম্পর্কে কিছু জানা / বোঝা ভাল।

।

সিএসএস () ব্যবহার করে ডিসপ্লে পরিবর্তন করা হচ্ছে

আমি অন্যান্য অন্যান্য উপায়গুলির কিছু না পাওয়া পর্যন্ত এটি এইভাবেই করতাম।

javascript:

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

পেশাদাররা:

লুকায় এবং লুকিয়ে রাখে। এটা সম্বন্ধে.

কনস:

আপনি যদি অন্য কোনও কিছুর জন্য "প্রদর্শন" বৈশিষ্ট্যটি ব্যবহার করেন তবে এটি লুকানোর আগে যা ছিল তার মান হার্ডকোড করতে হবে। সুতরাং আপনার যদি "ইনলাইন" থাকে, আপনাকে করতে হবে$("#element_to_hid").css("display", "inline"); অন্যথায় এটি অন্যথায় এটি ডিফল্টরূপে "ব্লক" বা অন্য যে কোনও কিছুতে বাধ্য করা হবে to
টাইপগুলিতে নিজেকে ধার দেয়।

উদাহরণ: https://jsfiddle.net/4chd6e5r/1/

।

অ্যাডক্লাস () / অপসারণক্লাস () ব্যবহার করে প্রদর্শন পরিবর্তন করা হচ্ছে

এর জন্য উদাহরণ স্থাপন করার সময়, আমি আসলে এই পদ্ধতির কিছু ত্রুটিগুলি ছুঁড়েছিলাম যা এটিকে খুব বিশ্বাসযোগ্য করে তোলে।

CSS / জাভাস্ক্রিপ্ট:

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

পেশাদাররা:

এটি লুকায় .... কখনও কখনও। উদাহরণে পি 1 দেখুন।
আনহাইডিংয়ের পরে, এটি পূর্ববর্তী প্রদর্শন মানটি ব্যবহার করে ফিরে আসবে .... কখনও কখনও। উদাহরণে পি 1 দেখুন।
আপনি যদি সমস্ত লুকানো বস্তু ধরতে চান তবে আপনার কেবল এটি করা দরকার $(".hidden")।

কনস:

প্রদর্শন মানটি এইচটিএমএলে সরাসরি সেট করা থাকলে আড়াল করে না। উদাহরণে পি 2 দেখুন।
ডিসপ্লেটি CSS () ব্যবহার করে জাভাস্ক্রিপ্টে সেট করা থাকলে আড়াল করে না। উদাহরণে পি 3 দেখুন।
কিছুটা বেশি কোড কারণ আপনাকে একটি সিএসএস বৈশিষ্ট্য নির্ধারণ করতে হবে।

উদাহরণ: https://jsfiddle.net/476oha8t/8/

।

টগল () ব্যবহার করে প্রদর্শন পরিবর্তন করা হচ্ছে

javascript:

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

পেশাদাররা:

সর্বদা কাজ করে।
স্যুইচিংয়ের আগে কোন রাজ্যে এটি ছিল তা নিয়ে আপনাকে উদ্বিগ্ন হওয়ার দরকার নেই। এর স্পষ্ট ব্যবহারটি .... টগল বোতামের জন্য।
সংক্ষিপ্ত এবং সহজ।

কনস:

যদি সরাসরি জানতে না পারে এমন কিছু করার জন্য আপনাকে কোন রাজ্যে স্যুইচ করছে তা জানতে হবে, এটি কোন অবস্থায় রয়েছে তা জানতে আপনাকে আরও কোড (একটি বিবৃতি) যুক্ত করতে হবে।
পূর্ববর্তী কন এর অনুরূপ, যদি আপনি লুকানোর উদ্দেশ্যে টগল () থাকে এমন একটি নির্দেশের সেট চালাতে চান তবে আপনি এটি জানেন না যে এটি ইতিমধ্যে লুকানো আছে, আপনাকে একটি চেক যুক্ত করতে হবে (যদি একটি বিবৃতি) প্রথমে এটি অনুসন্ধান করতে এবং এটি ইতিমধ্যে গোপন থাকলে, এড়িয়ে যান। উদাহরণের p1 দেখুন।
পূর্ববর্তী 2 কনসের সাথে সম্পর্কিত, টগল () ব্যবহার করে যা নির্দিষ্টভাবে লুকিয়ে রয়েছে বা নির্দিষ্টভাবে দেখানো হচ্ছে, অন্যরা আপনার কোডটি পড়তে বিভ্রান্ত করতে পারে কারণ তারা জানেন না যে তারা কীভাবে টগল করবেন।

উদাহরণ: https://jsfiddle.net/cxcawkyk/1/

।

লুকানো () / শো () ব্যবহার করে প্রদর্শন পরিবর্তন করা হচ্ছে

javascript:

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

পেশাদাররা:

সর্বদা কাজ করে।
আনহাইডিংয়ের পরে, এটি পূর্ববর্তী প্রদর্শন মানটি ব্যবহার করে ফিরে আসবে।
আপনি সর্বদা জানতে পারবেন যে আপনি কোন রাজ্যে বদল করছেন আপনি:
1. রাজ্যের বিষয়টি বিবেচনা করে যদি রাজ্যগুলির পরিবর্তন হয় তার আগে দৃশ্যমানতা যাচাই করতে বিবৃতি যুক্ত করতে হবে না
2. যদি রাষ্ট্রের বিষয়টি বিবেচিত হয় তবে আপনি অন্য কোন রাজ্যে স্যুইচ করছেন তা আপনার কোডটি পড়ে অন্যদের বিভ্রান্ত করবেন না।
স্বজ্ঞাত।

কনস:

আপনি যদি কোনও টগল অনুকরণ করতে চান তবে আপনাকে প্রথমে রাষ্ট্রটি পরীক্ষা করতে হবে এবং তারপরে অন্য রাজ্যে স্যুইচ করতে হবে। এগুলির পরিবর্তে টগল () ব্যবহার করুন। উদাহরণের p2 দেখুন।

উদাহরণ: https://jsfiddle.net/k0ukhmfL/

।

সামগ্রিকভাবে, আমি লুকিয়ে থাকা () / শো () হওয়া ভাল বলব যদি না আপনি নির্দিষ্টভাবে এটি টগল হওয়ার প্রয়োজন হয়। আমি আশা করি আপনি এই তথ্যটি সহায়ক হিসাবে খুঁজে পেয়েছেন।

— Macainian
সূত্র

8

আপনি কেন নিজের উত্তরে jQuery ব্যবহার করার সিদ্ধান্ত নিয়েছিলেন?

— ড্রেক্স_

@ ড্রেক্স_ হ্যাঁ আমি মনে করি তিনি জাভাস্ক্রিপ্টটি চেয়েছিলেন তিনি তাই না? সত্যি কথা বলতে, আমি এই থ্রেডটিতে আমার উত্তরটি সরিয়ে নিতে বাধ্য হয়েছিল কারণ অন্য থ্রেডে মতামত ছিল। আমি কেবল লোককে কিছু সহায়ক তথ্য দেওয়ার চেষ্টা করছিলাম, তবে এটি করার মতো জায়গা বলে মনে হচ্ছে না।

— ম্যাকেইনিয়ান

এছাড়াও আছে$("#element_to_hide").hidden = true/false

— P 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';
}

— ক্রিস হেইস
সূত্র

জাভাস্ক্রিপ্ট আড়াল / প্রদর্শন উপাদান

সিএসএস () ব্যবহার করে ডিসপ্লে পরিবর্তন করা হচ্ছে

অ্যাডক্লাস () / অপসারণক্লাস () ব্যবহার করে প্রদর্শন পরিবর্তন করা হচ্ছে

টগল () ব্যবহার করে প্রদর্শন পরিবর্তন করা হচ্ছে

লুকানো () / শো () ব্যবহার করে প্রদর্শন পরিবর্তন করা হচ্ছে

ক্লাস এবং আইডিগুলির জন্য ভ্যানিলা জেএস