Click-Ereignis neben div findet eine CSS-Klasse Typoskript

Question

hinzufügen ich eine Funktion in Typoskript machen möchte die nächste div zu finden und eine CSS-Klasse hinzufügen, hier ist mein Versuch:

<ul> 
    <li><a href="#" onclick="toggle()">Item 1</a></li> 
    <div class="content hide"></div> 
    <li><a href="#" onclick="toggle()">Item 2</a></li> 
    <div class="content hide"></div> 
    <li><a href="#" onclick="toggle()">Item 3</a></li> 
    <div class="content hide"></div> 
    <li><a href="#" onclick="toggle()">Item 4</a></li> 
    <div class="content hide"></div> 
    <li><a href="#" onclick="toggle()">Item 5</a></li> 
    <div class="content hide"></div> 
</ul> 

Nun wird die Funktion in Typoskript

function toggle(){ 
    this.parent().next('.content').class('hide'); 
} 

Danke Jungs

Answer 1

this ist nicht das, was Sie davon aus! Sie sollten das aktuelle Element als this als Argument übergeben.

Beachten Sie auch, es gibt keine .class Methode, sollten Sie .toggleClass Methode verwenden.

function toggle(elem) { 
 
    $(elem).parent().next('.content').toggleClass('hide'); 
 
}

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#" onclick="toggle(this)">Item 1</a> 
 
    </li> 
 
    <div class="content hide">Content Goes here!</div> 
 
    <li><a href="#" onclick="toggle(this)">Item 2</a> 
 
    </li> 
 
    <div class="content hide">Content Goes here!</div> 
 
    <li><a href="#" onclick="toggle(this)">Item 3</a> 
 
    </li> 
 
    <div class="content hide">Content Goes here!</div> 
 
    <li><a href="#" onclick="toggle(this)">Item 4</a> 
 
    </li> 
 
    <div class="content hide">Content Goes here!</div> 
 
    <li><a href="#" onclick="toggle(this)">Item 5</a> 
 
    </li> 
 
    <div class="content hide">Content Goes here!</div> 
 
</ul>

Aber es ist besser als jQuery-event-bindingInline-event-binding

function toggle() { 
 
    $(this).parent().next('.content').toggleClass('hide'); //this will refer to current element! 
 
} 
 
$('li a').on('click', toggle);

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Item 1</a> 
 
    </li> 
 
    <div class="content hide">Content Goes here!</div> 
 
    <li><a href="#" onclick="toggle(this)">Item 2</a> 
 
    </li> 
 
    <div class="content hide">Content Goes here!</div> 
 
    <li><a href="#">Item 3</a> 
 
    </li> 
 
    <div class="content hide">Content Goes here!</div> 
 
    <li><a href="#">Item 4</a> 
 
    </li> 
 
    <div class="content hide">Content Goes here!</div> 
 
    <li><a href="#">Item 5</a> 
 
    </li> 
 
    <div class="content hide">Content Goes here!</div> 
 
</ul>