কীভাবে জাভাস্ক্রিপ্টের সাহায্যে getElementById এর পরিবর্তে এলিমেন্টবাইক্লাস পাবেন?

Question 1

আমি প্রতিটি ডিআইভির শ্রেণীর উপর নির্ভর করে কোনও ওয়েবসাইটে নির্দিষ্ট ডিআইভি উপাদানগুলির দৃশ্যমানতা টগল করার চেষ্টা করছি। আমি সেগুলি টগল করতে একটি বেসিক জাভাস্ক্রিপ্ট স্নিপেট ব্যবহার করছি। সমস্যাটি হ'ল স্ক্রিপ্টটি কেবল ব্যবহার করে getElementById, যেমন getElementByClassজাভাস্ক্রিপ্টে সমর্থিত নয়। এবং দুর্ভাগ্যক্রমে আমাকে ডিআইভির নামকরণের জন্য ক্লাস ব্যবহার করতে হবে এবং আইডি নয়, কারণ ডিআইভির নামগুলি আমার এক্সএসএলটি স্টাইলশিটে নির্দিষ্ট বিভাগের নাম ব্যবহার করে গতিশীলভাবে তৈরি করেছে generated

আমি জানি যে এখন নির্দিষ্ট ব্রাউজারগুলি সমর্থন করে getElementByClassতবে ইন্টারনেট এক্সপ্লোরার যেহেতু আমি সেই পথে যেতে চাই না।

ক্লাস অনুসারে উপাদানগুলি পেতে ফাংশনগুলি ব্যবহার করে আমি স্ক্রিপ্টগুলি পেয়েছি (যেমন এই পৃষ্ঠায় # 8: http://www.dustindiaz.com/top-ten-javascript/ ), তবে আমি কীভাবে সেগুলি সংহত করতে পারি তা বুঝতে পারি না আমার টগল স্ক্রিপ্ট সহ।

এইচটিএমএল কোড এখানে। এক্সআইএমএল / এক্সএসএলটি সহ পৃষ্ঠা লোডে উত্পন্ন হওয়ার পরে ডিআইভিগুলি সেগুলি নিখোঁজ রয়েছে।

মূল প্রশ্ন: আইডি দ্বারা এলিমেন্ট না দিয়ে ক্লাস দ্বারা এলিমেন্ট পাওয়ার জন্য নীচের টগল স্ক্রিপ্টটি কীভাবে পাব?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>

Question 2

আধুনিক ব্রাউজারগুলির জন্য সমর্থন রয়েছে document.getElementsByClassName। আপনি বিক্রেতারা ক্যানিয়াসে এই কার্যকারিতাটি সরবরাহ করে তার সম্পূর্ণ ব্রেকডাউনটি দেখতে পারেন । আপনি যদি পুরানো ব্রাউজারগুলিতে সমর্থন প্রসারিত করতে চাইছেন তবে আপনি jQuery বা পলিফিলের মতো সलेक्टার ইঞ্জিন বিবেচনা করতে পারেন।

পুরানো উত্তর

আপনি jQuery যাচাই করতে চান , যা নিম্নলিখিত অনুমতি দেয়:

$(".classname").hide(); // hides everything with class 'classname'

গুগল একটি হোস্ট করা জিকুয়ের উত্স-ফাইল সরবরাহ করে, যাতে আপনি এটি উল্লেখ করতে পারেন এবং মুহুর্তগুলিতে আপ এবং চলমান হতে পারেন। আপনার পৃষ্ঠায় নিম্নলিখিত অন্তর্ভুক্ত করুন:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Question 3

getElementsByClassNameপদ্ধতি এখন স্থানীয়ভাবে ফায়ারফক্স, সাফারি, ক্রোম, ইন্টারনেট এবং অপেরা অতি সাম্প্রতিক সংস্করণটি দ্বারা সমর্থিত হয়, আপনি একটি ফাংশন চেক করতে বানাতে পারে যদি একটি নেটিভ বাস্তবায়ন পাওয়া যায়, অন্যথায় ডাস্টিন ডিয়াজ পদ্ধতি ব্যবহার করুন:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

ব্যবহার:

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(e.style.display == 'block') {
       e.style.display = 'none';
     } else {
       e.style.display = 'block';
     }
  }
}

Question 4

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

অ্যাক্টিভ্যালি getElementsByClassName ব্যবহার করে এটি একাধিক ক্লাসের অ্যারে প্রদান করে। কারণ একই শ্রেণীর নাম একই HTML পৃষ্ঠায় একাধিক ঘটনায় ব্যবহৃত হতে পারে। আমাদের প্রয়োজনীয় ক্লাসটি টার্গেট করতে আমরা অ্যারে এলিমেন্ট আইডি ব্যবহার করি, আমার ক্ষেত্রে এটি প্রদত্ত শ্রেণীর নামের প্রথম উদাহরণ I've সুতরাং আমি ব্যবহার করেছি [0]

Question 5

জাভাস্ক্রিপ্টে ক্লাস অ্যাক্সেস করতে এটি ব্যবহার করুন।

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

Question 6

সিএমএসের উত্তরে যোগ করা , toggle_visibilityআমি সবেমাত্র নিজেকে ব্যবহার করেছি এটির একটি আরও সাধারণ পদ্ধতি approach

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Question 7

আমার সমাধান:

প্রথমে একটি আইডি দিয়ে "<স্টাইল>" ট্যাগ তৈরি করুন।

<style id="YourID">
    .YourClass {background-color:red}
</style>

তারপরে, আমি জাভাস্ক্রিপ্টে এই জাতীয় একটি ফাংশন তৈরি করি:

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

আমার জন্য একটি কবজ মত কাজ।

Question 8

শ্রেণির ঘোষণায় আইডি যুক্ত করুন

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";