JavaScript - Çeşitli Sınıfları Kullanırken Genişlet/Daraltma Sorunları

Question

Çok fazla benzer soru var ve bunların çoğuna baktım, ancak bu soruna hitap eden bir şey bulamadık. Sorun, olay dinleyicilerini belirli bir sınıfa uygulamak (çoğunlukla başarı) uygulamak ve bu sınıfların her birinin ayrı bir sınıfa sahip kendi öğelerine sahip olmasıdır.

group.addEventListener("click", toggle, false); 

group

tıklama etkinliğini olacak bir sınıftır.

function toggle() { 
     var contents = this.getElementsByClassName('content');  

     for (i = 0; i < contents.length; i++) { 

      if (contents[i].style.display == "block") { 
       contents[i].style.display = "none"; 
      } 
      else { 
       contents[i].style.display = "block"; 
      } 
     }  
    } 

contents

group içinde yuvalanmış başka sınıftır. contents bir sürü olacak, ama sadece bir avuç group.

o/istediğim budur o belirli group altında her contents, sadece olanları daraltır genişletir için .addEventListener eser, ama click olayı kullanma. group'dan herhangi birine tıklıyorum ve sayfadaki contents'un tümü genişleyecek/daraltılacaktır. Bunu nasıl düzeltebilirim? Bu arada, bunlar sadece kodun snippet'leri (gönderilecek çok şey var). Kapsam sağlamak için this kullanmayı denedim, ancak yine de aynı sonuçları üretmesi nedeniyle yanlış yapıyorum. Şimdiden teşekkür ederim.

Düzenleme: SharePoint web bölümü için bu kullanıyorum HTML

group.innerHTML += String.format("<div class='group' style='display: block;'>" + 
          "<h3 style='display: inline-block; color: #000; margin: 0px; padding: 0px;'>{0}</h3>" + 
          "<img src='https:\/\/my.blah.com\/_layouts\/15\/images\/ecbarw.png' style='margin: 5px;' alt='Click to expand-collapse.' />" + 
          "{1}</div>", trimmedKey, groups[key]); 

group.addEventListener("click", toggle, false); 

hakkında

Daha. Bu, görüntülü reklam şablonlarının içinde yer alıyor. Bu yüzden, gönderilecek pek çok alakasız kod var, ancak group ve contents için alakalı HTML'yi ekleyeceğim.

var content = String.format('<div class="content" style="display: none; margin: 30px 0px;"><span id="{0}" class="ms-srch-item-title">' + 
       '<h3 class="ms-srch-ellipsis">{1}</h3>' + 
      '</span>' + 
      '<span style="margin-right: 10px;"><span style="font-weight:bold;">Assigned To: </span>{2}</span>' + 
      '<span style="margin-right: 10px;"><span style="font-weight:bold;">Due Date: </span>{3}</span>' + 
      '<span style="margin-right: 10px;"><span style="font-weight:bold;">Task Status: </span>{4}</span></div>', $htmlEncode(id + Srch.U.Ids.title), titleHtml, assignedTo, dueDate, status); 

search.Grouping.push(grouping, content); 

content

gruplara ayırır bir fonksiyonu (burada gösterilmemiştir) itilmiş oluyor. groups[key] temel olarak content ile aynı şeydir.

Answer 1

Ama senin durumunda çalışmıyor neden emin değilim ama burada sizin için basit bir demo hazırladık:

// get all the elements with class 'group' 
 
var groups = document.getElementsByClassName('group'); 
 

 
// add click event listener to each group 
 
for (var i = 0; i < groups.length; i ++) 
 
    groups[i].addEventListener("click", toggle, false); 
 

 
// function to toggle group contents 
 
function toggle() { 
 
    // get all the elements within this group with class 'content' 
 
    var contents = this.getElementsByClassName('content');  
 

 
    // if the content is visible then hide it and vice-versa 
 
    for (i = 0; i < contents.length; i++) { 
 
    if (contents[i].style.display == "block") { 
 
     contents[i].style.display = "none"; 
 
    } 
 
    else { 
 
     contents[i].style.display = "block"; 
 
    } 
 
    }  
 
}

.content { 
 
    display: None; 
 
    padding-left: 10px; 
 
} 
 

 
.group { 
 
    margin-top: 10px; 
 
}

<div class="group"> 
 
Group1 
 
    <div class="content another"> 
 
    Group 1 Content 1 
 
    </div> 
 
    <div class="content another"> 
 
    Group 1 Content 2 
 
    </div> 
 
</div> 
 
<div class="group"> 
 
Group2 
 
    <div class="content another"> 
 
    Group 2 Content 1 
 
    </div> 
 
    <div class="content another"> 
 
    Group 2 Content 2 
 
    </div> 
 
</div>