จะ getElementByClass แทน GetElementById ด้วย JavaScript ได้อย่างไร?


95

ฉันกำลังพยายามสลับการเปิดเผยองค์ประกอบ DIV บางอย่างบนเว็บไซต์โดยขึ้นอยู่กับคลาสของแต่ละ DIV ฉันกำลังใช้ข้อมูลโค้ด JavaScript พื้นฐานเพื่อสลับ ปัญหาคือสคริปต์ใช้เท่านั้นgetElementByIdเนื่องจากgetElementByClassไม่ได้รับการสนับสนุนใน JavaScript และน่าเสียดายที่ฉันต้องใช้คลาสและไม่ใช่ id เพื่อตั้งชื่อ DIV เนื่องจากชื่อ DIV ถูกสร้างขึ้นแบบไดนามิกโดยสไตล์ชีต XSLT ของฉันโดยใช้ชื่อหมวดหมู่บางประเภท

ฉันรู้ว่าเบราว์เซอร์บางตัวรองรับgetElementByClassแล้ว แต่เนื่องจาก Internet Explorer ฉันไม่ต้องการไปเส้นทางนั้น

ฉันพบสคริปต์ที่ใช้ฟังก์ชันเพื่อรับองค์ประกอบตามคลาส (เช่น # 8 ในหน้านี้: http://www.dustindiaz.com/top-ten-javascript/ ) แต่ฉันไม่สามารถหาวิธีรวมเข้าด้วยกันได้ ด้วยสคริปต์สลับของฉัน

นี่คือโค้ด HTML DIV เองหายไปเนื่องจากถูกสร้างขึ้นในการโหลดหน้าด้วย XML / XSLT

คำถามหลัก: ฉันจะรับสคริปต์ Toggle ด้านล่างเพื่อรับ Element by Class แทนการรับ Element by ID ได้อย่างไร

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

3
ทำไมฉันถึงไม่ใช้ jQuery มาตลอดฉันรับคำแนะนำของ @Jonathan Sampson ในการใช้ jQuery และมันก็ใช้ได้! (คำตอบของ CMS คือสิ่งที่ฉันคิดว่าฉันกำลังมองหา แต่ไม่สามารถใช้งานได้) ฉันให้รหัสแต่ละลิงก์และด้วย jQuery ฉันสามารถกำหนดได้ว่าจะแสดงคลาสใดและคลาสใดที่ซ่อนอยู่เมื่อคุณคลิกที่ ลิงค์เฉพาะ สุดยอด! วิธีนี้ดูเหมือนจะดีเกินจริง jQuery ดูเหมือนดีเกินไปที่จะเป็นจริง อะไรคือข้อเสียของการใช้ jQuery? ทำไมฉันถึงใช้ Javascript แทน jQuery?
Alan

คำตอบ:


81

เบราว์เซอร์สมัยใหม่รองรับdocument.getElementsByClassNameไฟล์. ท่านสามารถเข้าดูรายละเอียดเต็มรูปแบบของการที่ผู้ขายให้การทำงานนี้ที่caniuse หากคุณต้องการขยายการสนับสนุนไปยังเบราว์เซอร์รุ่นเก่าคุณอาจต้องการพิจารณาเครื่องมือเลือกแบบที่พบใน jQuery หรือ polyfill

คำตอบที่เก่ากว่า

คุณจะต้องตรวจสอบในjQueryซึ่งจะอนุญาตสิ่งต่อไปนี้:

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

Google มีซอร์สไฟล์ jQuery ที่โฮสต์ไว้เพื่อให้คุณสามารถอ้างอิงและเปิดใช้งานได้ทันที รวมสิ่งต่อไปนี้ในเพจของคุณ:

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

1
แม้ว่าจะดี แต่ jQuery ที่โฮสต์โดย Google นั้นมีประโยชน์สำหรับสิ่งที่ง่ายที่สุดเท่านั้นเนื่องจากการรักษาความปลอดภัยการเขียนสคริปต์ข้ามไซต์ที่ใช้งานโดยเบราว์เซอร์ที่ทันสมัยส่วนใหญ่
Paulo Santos

2
คุณยังสามารถดาวน์โหลดไฟล์ต้นฉบับจาก jQuery.com และอ้างอิงในเครื่องได้
Sampson

21
@Paulo: การเขียนสคริปต์ข้ามไซต์ไม่สามารถใช้ได้กับ<script>แท็ก jQuery ที่โฮสต์โดย Google ได้รับการออกแบบมาโดยเฉพาะสำหรับเว็บไซต์ที่ใช้งานจริง (เป็น CDN) หากไซต์ของคุณเป็น https เพียงตรวจสอบให้แน่ใจว่าคุณใช้เวอร์ชัน https เพื่อหลีกเลี่ยงคำเตือนเนื้อหาผสมกัน
Chetan S

3
ในความเป็นจริง<script>การแทรกแท็กเป็นพื้นฐานของคำขอ JSONP ข้ามไซต์
Chetan S

2
Paulo คุณทราบหรือไม่ว่าเมื่อคุณรวม jQuery กับแท็ก <script> แล้วจะไม่มีข้อ จำกัด ข้ามไซต์เลยหรือ
Dark Falcon

88

getElementsByClassNameวิธีการอยู่ในขณะนี้ได้รับการสนับสนุนโดยกำเนิดโดยรุ่นล่าสุดของ Firefox, Safari, Chrome, IE และ Opera คุณสามารถทำให้ฟังก์ชั่นการตรวจสอบว่าการดำเนินงานพื้นเมืองใช้ได้มิฉะนั้นใช้วิธีการที่ดัสตินบ:

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

2
เหตุใดคุณจึงใช้ฟังก์ชันภายในนั้นแทนที่จะใช้โค้ดธรรมดา
Tomáš Zato - คืนสถานะ Monica

-1 สำหรับตัวอย่างการใช้งานโดยสมมติว่าองค์ประกอบทั้งหมดบนหน้าจอมีการแสดงบล็อก ใน toggle_visibility ถ้า e เป็น <span> ควรเป็น "inline" ไม่ใช่ "block" วิธีแก้ปัญหาที่มีประสิทธิภาพมากขึ้นคือการกำหนดคลาส CSS: .invisible {display: none! important} และใช้ JavaScript (หรือ jQuery) เพื่อกำหนดและยกเลิกการกำหนดคลาสนั้นจากองค์ประกอบ
John Meyer

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

Acyually โดยใช้ getElementsByClassName จะส่งคืนอาร์เรย์ของหลายคลาส เนื่องจากสามารถใช้ชื่อคลาสเดียวกันในมากกว่าหนึ่งอินสแตนซ์ภายในหน้า HTML เดียวกัน เราใช้รหัสองค์ประกอบอาร์เรย์เพื่อกำหนดเป้าหมายคลาสที่เราต้องการในกรณีของฉันมันเป็นอินสแตนซ์แรกของชื่อคลาสที่กำหนดดังนั้นฉันจึงใช้ [0]



2

เพิ่มคำตอบของ CMSนี่เป็นวิธีการทั่วไปที่toggle_visibilityฉันเพิ่งใช้เอง:

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

1

วิธีแก้ปัญหาของฉัน:

ขั้นแรกให้สร้างแท็ก "<style>" ด้วย ID

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

จากนั้นฉันสร้างฟังก์ชันใน JavaScript ดังนี้:

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

ทำงานเหมือนมีเสน่ห์สำหรับฉัน


1
ตัวแบ่งบรรทัด ( <br>) ไม่มีประโยชน์ / ไม่ถูกต้องภายในแท็กสไตล์
Chris Forrence

-1

ผนวก ID ที่ประกาศคลาส

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.