Viết cho một div không duy nhất bằng Javascript

Question

Tôi đang tạo trình đọc RSS đa cấp cho trường học.

Danh sách là div bao gồm từng nguồn cấp dữ liệu riêng lẻ (số lượng nguồn cấp dữ liệu sẽ dao động).

theTitle là div sẽ được lấp đầy với thuộc tính của nguồn cấp dữ liệu hiện tại. Ngoài ra, nếu được nhấp, nó sẽ tải một danh sách các thuộc tính từ nguồn cấp dữ liệu hiện tại vào trongContent.

Tôi tự hỏi làm thế nào tôi có thể tự động tải các thuộc tính vàoContent khi theTitle được nhấp, vì theContent và theTitle sẽ là các div không độc nhất (tôi không thể cung cấp cho chúng ID).

Nhờ sự giúp đỡ của bạn trước,

-Andrew

Answer 1

document.getElementsByClassName ('alist'). GetElementsByTagName ('div')

Answer 2

Bạn nên nhìn vào jQuery selectors cho điều đó và khác Thao tác DOM. Một cái gì đó như

$("div.theContent").attr("name", "value"); 

Answer 3

bằng cách sử dụng jquery, bạn có thể sử dụng mã như sau:

$(".theTitle").bind("click", function(){ 
    $el = $(this); 
      $el.parent().$(".theContent").load('ajax/content.php?news=' . $el.text()); 
}); 

này sẽ làm cho tất cả các liên kết của bạn có thể click, một trên nhấp chuột, cập nhật divs nội dung tương ứng của họ với giá trị của ajax/content.php? news = theTitle-value

Answer 4

Bạn phải có khả năng xác định yếu tố nào bạn muốn cập nhật nếu bạn không muốn cập nhật nhiều hơn một. Nếu các phần tử được nhóm bên trong thứ khác mà thì có giá trị "id", bạn có thể tận dụng điều đó.

Answer 5

<div class="aList"> 
<div class="theTitle" onclick="fillContentBox(this)"></div> 
<div class="theContent"></div> 
</div> 

Và trong kịch bản của bạn ...

function fillContentBox(div) { 
    var theContentDiv = div.parentNode.getElementsByTagName("div")[1]; 
    // statements that do things with theContentDiv 
} 

Answer 6

Sử dụng một thư viện Javascript đẹp như Prototype hoặc jQuery. Dường như bây giờ nhỏ, nhưng các khung này giúp bạn tiết kiệm tấn về thời gian trong thời gian dài.

Trong cả hai khuôn khổ, bạn có thể chọn div với:

$('div.theTitle') 

Với jQuery, bạn có thể làm:

$('div.theTitle').click(function() { 
    var title = $(this).text(); 
    var contentDiv = $(this).siblings('div.theContent'); 
    // Do something with contentDiv and the title 
}); 

Điều này sẽ làm mỗi Title div có một sự kiện onClick mà không một cái gì đó với div liên kết của nó.