2017-03-15 6 views
0

Ich habe einen Code für Toggle-Taste geschrieben mit HTML, CSS & Javascript. Das Ziel dieses Codes ist es, den href-Link zu aktivieren oder auszuwählen, wenn das Kontrollkästchen aktiviert ist. Dies funktioniert gut auf JSBin.com .. Aber wenn ich auf Flasher Server auf Linux-Plattform ausführen, wird das Kontrollkästchen sofort deaktiviert, so dass die Schaltfläche für nur eine Sekunde schaltet und in die Aus-Position zurückkehrt. Ich habe keine Ahnung, warum das passiert.Toggle-Taste funktioniert auf JSbin, aber nicht auf Flaschen-Server

$(function(){ 
 
     $("input[type='checkbox']").change(function(){ 
 
     var item=$(this);  
 
     if(item.is(":checked")) 
 
     { 
 
      $('#On').get(0).click(); 
 
     } 
 
     else 
 
     { 
 
      $('#Off').get(0).click(); 
 
     }   
 
    }); 
 
    }) 
 
    $(document).ready(function(){ 
 
     //$("#Off").hide(); 
 
     $("#On").click(function(){ 
 
     
 
      $("#On").hide(); 
 
      $("#Off").show(); 
 
     
 
     }); 
 
     $("#Off").click(function(){ 
 
      $("#Off").hide(); 
 
      $("#On").show(); 
 
     }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <title>{{ title }}</title> 
 
    </head> 
 
    <body> 
 
    <body> 
 

 
    <input type="checkbox" > <br/> 
 
     <h1> 
 
      <a href="/On" id="On" class="">ON</a> 
 
     </h1> 
 
     <h1> 
 
      <a href="/Off" id="Off" class="off_class">OFF</a> 
 
     </h1> 
 
    </body> 
 
    </body> 
 
    </html>

Antwort

0

Verwenden # in href statt und Code funktioniert gut.

$(function() { 
 
    $("input[type='checkbox']").change(function() { 
 
    var item = $(this); 
 
    if (item.is(":checked")) { 
 
     $('#On').get(0).click(); 
 
    } else { 
 
     $('#Off').get(0).click(); 
 
    } 
 
    }); 
 
}) 
 
$(document).ready(function() { 
 
    //$("#Off").hide(); 
 
    $("#On").click(function() { 
 

 
    $("#On").hide(); 
 
    $("#Off").show(); 
 

 
    }); 
 
    $("#Off").click(function() { 
 
    $("#Off").hide(); 
 
    $("#On").show(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox"> <br/> 
 
<h1> 
 
    <a href="#" id="On" class="">ON</a> 
 
</h1> 
 
<h1> 
 
    <a href="#" id="Off" class="off_class">OFF</a> 
 
</h1>

+0

Jetzt ist der Code funktioniert gut .. Aber die Python-Kolben nicht den Zustand von href-Tag zu erfassen. Wenn ich '/' Flasher benutze identifiziert den Zustand aus HTML und führt einige Bedingungen aus, aber auf der Benutzeroberfläche funktioniert die Umschalttaste nicht. Auf der anderen Seite, wenn ich '#' verwende, funktioniert die Umschalttaste gut, aber Flasche liest nicht den Href-Zustand. Können Sie eine Lösung vorschlagen? –

+0

Eigentlich kenne ich Python nicht, also kann ich dir nicht helfen. –

Verwandte Themen