2013-04-02 27 views
20

jestem generowania strony z dużą ilością produktu, a do tego trzeba dużo ID, i zrobiłem to używając po stronie serwera (Python), więc wysłać do każdego produktu własnej <div id='hello1'> test </div>Jak ustawić ID za pomocą javascript?

Teraz ponieważ użytkownik będzie dinamycaly ustawić wartość i zobaczyć wynik w przeglądarce, chcę, aby wygenerować inny ID, to ja znalazłem btoa("hello1") więc generować kolejne ID

więc pytanie, w jaki sposób mogę umieścić btoa("hello1") w <div>?

Edycja: to, co chcę wygenerować, to kolejne <div> i nie aktualizowanie pierwszego.

<input id="{{str(product["avt"]["fto"])}}" > this will become <input id="12232" > because it is special to Tornado Template 
<span>New price :</span> 
<span id=btoa({{str(produit["avt"]["fto"])}})> This is where i use innerHTML </span> 

Jak widać, użytkownicy dodadzą wartość i zobaczą ją dynamicznie.

to będzie działać z użyciem Pythona:

<span id="{{base64.b64encode(str(produit["avt"]["fto"]))}}"></span> 

ale jeśli można to zrobić za pomocą JavaScript, serwer będzie wolny za połowę operacji!

+2

Pokaż nam, jak generujesz element div. – bfavaretto

+0

ok, zaktualizuję go –

+1

Czy te szablony nie są przetwarzane po stronie serwera z pythonem? Czy tworzysz jakieś elementy za pomocą JavaScript? – bfavaretto

Odpowiedz

44

Masz na myśli?

var hello1 = document.getElementById('hello1'); 
hello1.id = btoa(hello1.id); 

Do dalszego Załóżmy, że chciał, aby wszystkie elementy z klasą „abc”. Możemy użyć querySelectorAll() do osiągnięcia tego celu:

HTML

<div class="abc"></div> 
<div class="abc"></div> 

JS

var abcElements = document.querySelectorAll('.abc'); 

// Set their ids 
for (var i = 0; i < abcElements.length; i++) 
    abcElements[i].id = 'abc-' + i; 

Będzie to przypisać identyfikator 'abc-<index number>' do każdego elementu. Więc to wyjdzie tak:

<div class="abc" id="abc-0"></div> 
<div class="abc" id="abc-1"></div> 

Aby utworzyć element i przypisz id możemy użyć document.createElement() i następnie appendChild().

var div = document.createElement('div'); 
div.id = 'hello1'; 

var body = document.querySelector('body'); 
body.appendChild(div); 

Aktualizacja

Można ustawić id na elemencie jak ta, czy skrypt jest w pliku HTML.

<input id="{{str(product["avt"]["fto"])}}" > 
<span>New price :</span> 
<span class="assign-me"> 

<script type="text/javascript"> 
    var s = document.getElementsByClassName('assign-me')[0]; 
    s.id = btoa({{str(produit["avt"]["fto"])}}); 
</script> 

Twoje wymagania nadal nie są jednak w 100% jasne.

+0

nie, inny –

+1

Co masz na myśli? W ten sposób ustawiasz "identyfikator". Zdobądź 'element', a następnie użyj' element.id' –

+3

@AbdelouahabPp innego? w jaki inny sposób się spodziewasz? jest to najprostszy i standardowy typ: – exexzian

Powiązane problemy