用jQuery重定向複選框

所以我有一個很酷的開關盒的html和css，我將它用作我網站上的語言開關。但是，因爲我是JavaScript的初學者，所以我錯過了可以做重定向的處理程序。用jQuery重定向複選框

到目前爲止，這是我的工作。問題出在JavaScript上。

$(".flag-switch input").click(function(){$(this).is(":checked")?setTimeout(function(){window.location.href="en/"},250):setTimeout(function(){window.location.href="../"},250)}

.flag-switch { 
 
    position: relative; 
 
    right: -30px; 
 
    top: 4px; 
 
    outline: 0; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    -webkit-perspective: 1000; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -webkit-tap-highlight-color: transparent; 
 
    width: 60px; 
 
    height: 30px; 
 
    margin: 5px auto; 
 
} 
 
.flag-switch:before, .flag-switch:after { 
 
    position: absolute; 
 
    color: white; 
 
    font-family: 'Raleway', sans-serif; 
 
    top: 8px; 
 
    font-size: 13px; 
 
    font-weight: 700; 
 
} 
 
.flag-switch:before { 
 
    left: -19px; 
 
    content: attr(data-first-lang); 
 
} 
 
.flag-switch:after { 
 
    right: -17px; 
 
    content: attr(data-second-lang); 
 
} 
 
.flag-switch input { 
 
    display: none; 
 
} 
 
.flag-switch input + label { 
 
    display: block; 
 
    position: absolute; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    width: 60px; 
 
} 
 
.flag-switch input + label:before, .flag-switch input + label:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 30px; 
 
    -webkit-transition: all 0.25s ease-in-out; 
 
    transition: all 0.25s ease-in-out; 
 
} 
 
.flag-switch input + label:before { 
 
    height: 30px; 
 
    width: 60px; 
 
    background-color:#EE4B53 ; 
 
} 
 
.flag-switch input + label:after { 
 
    top: 3px; 
 
    left: 3px; 
 
    border: 2px solid #DFDFDF; 
 
    width: 24px; 
 
    height: 24px; 
 
    background: #eb3 url(http://i.imgur.com/mYEJa6E.png) -26px center; 
 
    transform: translate(30px, 0); 
 
    -webkit-transform: translate(30px, 0); 
 
} 
 
.flag-switch input:checked + label:after { 
 
    background: #000233 url(http://i.imgur.com/mYEJa6E.png) -2px center; 
 
    -webkit-transition: all 0.25s ease-in-out; 
 
    transition: all 0.25s ease-in-out; 
 
    -webkit-transform: translate(0, 0); 
 
    transform: translate(0, 0); 
 
} 
 
.flag-switch input:checked + label:before { 
 
    background-color: #1FA9D6; 
 
}

<div class="flag-switch" data-first-lang="GR" data-second-lang="EN"> 
 
    <input type="checkbox" id="check1" checked> 
 
    <label for="check1"></label> 
 
</div>

來源

2016-02-25 Lucas Smith

'$'未香草的JavaScript，這是jQuery的 –

是的，但我可以做到這一點香草JavaScript？我看到一些方法，但他們沒有工作。 –

在上面的代碼片段中，您已經忘記添加'jquery.min.js'。 – sahil

的JavaScript版本相同的：

document.querySelector('#check1').addEventListener('change', function(){ 
 
if(this.checked){ 
 
    setTimeout(function(){window.location.href="en/"},250); 
 
    } 
 
    else{ 
 
    setTimeout(function(){window.location.href="../"},250); 
 
    } 
 
});

.flag-switch { 
 
    position: relative; 
 
    right: -30px; 
 
    top: 4px; 
 
    outline: 0; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
      appearance: none; 
 
    -webkit-perspective: 1000; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -webkit-tap-highlight-color: transparent; 
 
    width: 60px; 
 
    height: 30px; 
 
    margin: 5px auto; 
 
} 
 
.flag-switch:before, .flag-switch:after { 
 
    position: absolute; 
 
    color: white; 
 
    font-family: 'Raleway', sans-serif; 
 
    top: 8px; 
 
    font-size: 13px; 
 
    font-weight: 700; 
 
} 
 
.flag-switch:before { 
 
    left: -19px; 
 
    content: attr(data-first-lang); 
 
} 
 
.flag-switch:after { 
 
    right: -17px; 
 
    content: attr(data-second-lang); 
 
} 
 
.flag-switch input { 
 
    display: none; 
 
} 
 
.flag-switch input + label { 
 
    display: block; 
 
    position: absolute; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
     -ms-user-select: none; 
 
      user-select: none; 
 
    width: 60px; 
 
} 
 
.flag-switch input + label:before, .flag-switch input + label:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-radius: 30px; 
 
    -webkit-transition: all 0.25s ease-in-out; 
 
    transition: all 0.25s ease-in-out; 
 
} 
 
.flag-switch input + label:before { 
 
    height: 30px; 
 
    width: 60px; 
 
    background-color:#EE4B53 ; 
 
} 
 
.flag-switch input + label:after { 
 
    top: 3px; 
 
    left: 3px; 
 
    border: 2px solid #DFDFDF; 
 
    width: 24px; 
 
    height: 24px; 
 
    background: #eb3 url(http://i.imgur.com/mYEJa6E.png) -26px center; 
 
    transform: translate(30px, 0); 
 
    -webkit-transform: translate(30px, 0); 
 
} 
 
.flag-switch input:checked + label:after { 
 
    background: #000233 url(http://i.imgur.com/mYEJa6E.png) -2px center; 
 
    -webkit-transition: all 0.25s ease-in-out; 
 
    transition: all 0.25s ease-in-out; 
 
    -webkit-transform: translate(0, 0); 
 
    transform: translate(0, 0); 
 
} 
 
.flag-switch input:checked + label:before { 
 
    background-color: #1FA9D6; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="flag-switch" data-first-lang="GR" data-second-lang="EN"> 
 
    <input type="checkbox" id="check1" > 
 
    <label for="check1"></label> 
 
</div>

來源

2016-02-25 18:51:50 sahil

用jQuery重定向複選框

回答

相關問題