Javascript/Jquery, onclick Klasse ändern?

Will ich ändern, eine Klasse onclick. Was habe ich im moment:

<script>
function changeclass() {

var NAME = document.getElementById("myclass")

NAME.className="mynewclass"

} 
</script>

Aber, natürlich, es funktioniert nicht. Auch, es sollten wieder zum vorherigen Zustand onclick wieder.

Mein html:

<div id="showhide" class="meta-info" onclick="changeclass();">

So, wenn ich drücken Sie auf #anzeigenausblenden myclass ändern sollte mynewclass. Vielen Dank für die Hilfe im Voraus!

Verwenden Sie getElementById. Diese Funktion nimmt der id ist ein element, nicht seine Klasse.

InformationsquelleAutor funguy | 2011-08-10

24

Mit jquery könnte man tun, um die sth. wie diese, die einfach Klassen.
```
$('.showhide').click(function() {
    $(this).removeClass('myclass');
    $(this).addClass('showhidenew');
});
```
Wenn Sie wechseln wollen, auf Klassen hin und her, bei jedem Klick, den Sie verwenden können, toggleClass, etwa so:
```
$('.showhide').click(function() {
    $(this).toggleClass('myclass');
    $(this).toggleClass('showhidenew');
});
```
Wie dieses script Aussehen soll, wenn mein anzeigenausblenden ist nicht eine id, es <div class = "anzeigenausblenden"> und meine neue Klasse wäre showhidenew ?
Das macht nicht viel Unterschied. Wechsel von id(#) in die Klasse(.)änderungen Ihrer Selektor aus #anzeigenausblenden .anzeigenausblenden. Die Umbenennung der neuen Klasse kopiert werden kann, um die addClass / toggleClass, wenn Sie das letztere. Siehe mein edit.
Muss ich hinzufügen, sowas wie onclick()? Oder sollte es genauso funktionieren, wenn ich drücken Sie auf clas .anzeigenausblenden?
Ich weiß, dass deine Variante richtig ist, aber in meinem Fall einfach nicht funktioniert, irgendwie.
Kannst du deinen code irgendwo (z.B. auf jsfiddle.net) oder poste einen link zu deiner aktuellen Seite? Dann kann ich Ihnen helfen, mehr genau.

InformationsquelleAutor SunnyRed
5

Ihre getElementById auf der Suche nach einem element mit der id "myclass", aber in deinem html die id des DIV ist showhide. Änderung:
```
<script>
function changeclass() {

var NAME = document.getElementById("showhide")

NAME.className="mynewclass"

} 
</script>
```
Es sei denn, Sie versuchen, auf eine anderes element mit der id "myclass", dann müssen Sie sicherstellen, dass ein solches element existiert.

InformationsquelleAutor Griffin
2

Nur dieses wird hinzufügen "mynewclass", um das element mit der id myElement und wieder auf den nächsten Anruf.
```
<div id="showhide" class="meta-info" onclick="changeclass(this);">

function changeclass(element) {
    $(element).toggleClass('mynewclass');
}
```
Oder für etwas mehr jQuery-Weg (würden Sie dies ausführen, nachdem das DOM geladen ist)
```
<div id="showhide" class="meta-info">

$('#showhide').click(function() {
    $(this).toggleClass('mynewclass');
});
```
Sehen ein Beispiel dieses hier: http://jsfiddle.net/S76WN/

Chad, wie dieses Skript Aussehen soll, wenn mein anzeigenausblenden ist nicht eine id, es <div class = "anzeigenausblenden"> und meine neue Klasse wäre showhidenew ?
Ändern Sie die jQuery-Selektor $('#showhide') etwas richtig wie $('.showhide') und die Klasse in toggleClass zu showhidenew.

InformationsquelleAutor CaffGeek
0

Ich würde denken, das: http://jsfiddle.net/Skooljester/S3y5p/1/ sollte es tun. Wenn ich nicht über den Klassennamen zu 100% korrekt ist, können Sie einfach ändern Sie Sie, um was auch immer Sie Sie benötigen.

Wie dieses script Aussehen soll, wenn mein anzeigenausblenden ist nicht eine id, es <div class = "anzeigenausblenden"> und meine neue Klasse wäre showhidenew ?
Aktualisiert, der link zu diesem: jsfiddle.net/Skooljester/S3y5p/1

InformationsquelleAutor jezza-tan

      <div class="liveChatContainer online">
        <div class="actions" id="change">
         <span class="item title">Need help?</span>
              <a href="/test" onclick="demo()"><i class="fa fa-smile-o"></i>Chat</a>
              <a href="/test"><i class="fa fa-smile-o"></i>Call</a>
              <a href="/test"><i class="fa fa-smile-o"></i>Email</a>
        </div>
              <a href="#" class="liveChatLabel">Contact</a>
     </div>
             <style>
               .actions_one{
               background-color: red;
                      } 
              </style>



           <script>
          function demo(){
      document.getElementById("change").setAttribute("class","actions_one");}
            </script>

InformationsquelleAutor Vikas Kandari

Weiteres Beispiel ist:

$(".myClass").on("click", function () {
   var $this = $(this);

   if ($this.hasClass("show") {
    $this.removeClass("show");
   } else {
    $this.addClass("show");
   }
});

InformationsquelleAutor maverick

0

Ich denke du meinst, dass Sie wollen ein onclick-Ereignis, dass die Veränderungen der a-Klasse.

Hier ist die Antwort, wenn jemand auf diese Frage und ist buchstäblich suchen zum zuweisen einer Klasse, und es ist mit onclick JQUERY.

Ist es etwas Anti-intuitiv, aber wenn Sie ändern möchten das onclick-Ereignis durch die änderung der Klasse, die Sie deklarieren müssen das onclick-Ereignis gelten für Elemente, die von einem übergeordneten Objekt.

HTML
```
<div id="containerid">
     Text <a class="myClass" href="#" />info</a>
     Other Text <div class="myClass">other info</div>
</div>
<div id="showhide" class="meta-info">hide info</div>
```
Dokument Bereit
```
$(function() {
     $("#containerid").on("click",".myclass",function(e){ /*do stuff*/ }
     $("#containerid").on("click",".mynewclass",function(e){ /*do different stuff*/ }
     $("#showhide").click(function() {changeclass()}
});
```
Leichte Zwicken, um Ihre Javascript -
```
<script>
function changeclass() {
        $(".myClass,.myNewClass").toggleClass('myNewClass').toggleClass('myClass');
} 
</script>
```
Wenn Sie nicht zuverlässig identifizieren, die einem übergeordneten Objekt können Sie so etwas tun.
```
$(function() {
     $(document).on("click",".myclass",function(e){}
     $(document).on("click",".mynewclass",function(e){}
});
```
Wenn Sie nur wollen, verstecken Sie die Artikel, die Sie vielleicht finden es einfacher, zu verwenden .hide() und .show().

InformationsquelleAutor Chris McCowan
0

Für eine super prägnante Ansatz versuchen:
```
<div onclick="$(this).toggleClass("newclass")">click me</div>
```
InformationsquelleAutor Felix Eve

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.