他のボタンをクリックしてjquery .css（）を削除する方法はありますか？このjqueryのスイッチで

、イムは、現在、他のボタンがクリックされたときに元の状態に戻ってクリックされたボタンを作成しようとしています。また、ページが読み込まれたときに自動的にクリックされるオフボタンのようなID。 Iveは多くのコードを試しましたが、動作しないようです。他のボタンをクリックしてjquery .css（）を削除する方法はありますか？このjqueryのスイッチで

は、任意の助けをありがとう！

HTML：

<!DOCTYPE HTML> 
<html> 

<head> 

    <title>Toggleswitch</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src='script.js' type='text/javascript'></script> 

</head> 
<body> 

<div class="switchcontainer"> 
    <button id="darkmodeon">ON</button> 
    <button id="darkmodeoff">OFF</button> 
</div> 

</body> 
</html>

CSS：

body{ 
    background-color: black; 
} 

.switchcontainer{ 
    background-color: white; 
    display: flex; 
    justify-content: space-between; 
    border-radius: 50px; 
    width: 125px; 
    padding: 5px; 

} 

button{ 
    width:50px; 
    height: 50px; 
    border: none; 
    border-radius: 50px; 
    background-color: #d8d8d8; 
    color: #777777; 
    font-family: 'calibri light'; 
    font-size: 17px; 
    font-weight: bold; 

}

のjQuery：ボタンをクリックすると

$(document).ready(function(){ 
    var darkon = '#darkmodeon'; 
    var darkoff = '#darkmodeoff'; 

    $(darkon).click(function(){ 
     $(this).css({ 
      "background-color": "#85c452", 
      "color": "white", 
      "transition": "all 0.2s ease" 
     }); 
    }); 

    $(darkoff).click(function(){ 
     $(this).css({ 
      "background-color": "#85c452", 
      "color": "white", 
      "transition": "all 0.2s ease" 
     }); 

     $(this).off('click',darkon); 

    }); 

});

出典

2017-07-03 AbuN2286

は、あなたがCSSのプロパティを設定することにより、他のボタンをオフにすることができますそのボタンをinheritにします。これにより、プロパティがデフォルトにリセットされます。あなたは$(this)を使用しているだけのように、$('#darkmodeoff')と$('#darkmodeon')でそれらをターゲットにすることができます。

Offボタンをデフォルトで選択するには、$(document.ready)にスタイルを適用するだけです。私はこのために$('#darkmodeoff')[0].style.backgroundColorと$('#darkmodeoff')[0].style.colorに行ってきました。

個人的に、私はまた、あなたが実際にそれらをクリックしている、とoutline: nonebutton:hoverにデフォルトで生成されます青色の枠線を削除するかのように見えるようにボタンにcursor: pointerを追加することをお勧めしたいです。私は、スニペットにこれらを追加しました:)

$(document).ready(function() { 
 
    var darkon = '#darkmodeon'; 
 
    var darkoff = '#darkmodeoff'; 
 
    
 
    // Set the off to clicked by default 
 
    $('#darkmodeoff')[0].style.backgroundColor = "#85c452"; 
 
    $('#darkmodeoff')[0].style.color = "white"; 
 

 
    $(darkon).click(function() { 
 
    $(this).css({ 
 
     "background-color": "#85c452", 
 
     "color": "white", 
 
     "transition": "all 0.2s ease" 
 
    }); 
 
    $('#darkmodeoff').css({ 
 
     "background-color": "inherit", 
 
     "color": "inherit", 
 
     "transition": "all 0.2s ease" 
 
    }); 
 
    }); 
 

 
    $(darkoff).click(function() { 
 
    $(this).css({ 
 
     "background-color": "#85c452", 
 
     "color": "white", 
 
     "transition": "all 0.2s ease" 
 
    }); 
 
    $('#darkmodeon').css({ 
 
     "background-color": "inherit", 
 
     "color": "inherit", 
 
     "transition": "all 0.2s ease" 
 
    }); 
 
    }); 
 

 
});

body { 
 
    background-color: black; 
 
} 
 

 
.switchcontainer { 
 
    background-color: white; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border-radius: 50px; 
 
    width: 125px; 
 
    padding: 5px; 
 
} 
 

 
button { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: none; 
 
    border-radius: 50px; 
 
    background-color: #d8d8d8; 
 
    color: #777777; 
 
    font-family: 'calibri light'; 
 
    font-size: 17px; 
 
    font-weight: bold; 
 
    cursor: pointer; /* ADDED */ 
 
} 
 

 
button:focus { 
 
    outline: none; /* ADDED */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="switchcontainer"> 
 
    <button id="darkmodeon">ON</button> 
 
    <button id="darkmodeoff">OFF</button> 
 
</div>

は、この情報がお役に立てば幸い！ :)

出典

2017-07-03 23:39:15

これは本当にありがとうございます！ – AbuN2286

驚くばかり！このソリューションを聞いてうれしいことがあなたを助けてくれたようです:) –

は$(this).off('click',darkon);を削除し、代わりにあなたのdarkonイベントハンドラの開始にあなたのdarkoffイベントハンドラと$(darkoff).trigger('click');の開始に$(darkon).trigger('click');を追加します。

あなたはdarkoffイベントハンドラを閉じる前には、この}).trigger('click');

を追加し、私はあなたの元のコードを編集するだろうが、私は現時点では私の携帯電話によ。

出典

2017-07-03 23:40:21 James

あなたがイベントを有効にする場合は、クリックイベントの引数としてハンドラに渡す必要があります。
代わりの場でCSSを追加し、クリーンな状態を、対象とするクラスを使用します。
は、ページのロードに、handler呼び出すハンドラがバインドされた後、クリックイベントをトリガします。

var darkon = '#darkmodeon'; 
 
var darkoff = '#darkmodeoff'; 
 

 
// This is how you should be binding your click handler 
 
// to the button if you are planning to turn of the event 
 
// at a later stage. Since, the `off` method expects the same 
 
// function to be passed when you attach the event 
 
$(darkon).click(addActiveClass); 
 

 
$(darkoff).click(function(e) { 
 
    addActiveClass(e); 
 

 
    $(darkon).removeClass('on'); 
 
    
 
    $(darkon).off('click', addActiveClass); 
 

 
}); 
 

 
function addActiveClass(e) { 
 
    var $target = $(e.target); 
 
    
 
    $target.addClass('on'); 
 
} 
 

 
$(darkon).click();

body { 
 
    background-color: black; 
 
} 
 

 
.switchcontainer { 
 
    background-color: white; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    border-radius: 50px; 
 
    width: 125px; 
 
    padding: 5px; 
 
} 
 

 
button { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: none; 
 
    border-radius: 50px; 
 
    background-color: #d8d8d8; 
 
    color: #777777; 
 
    font-family: 'calibri light'; 
 
    font-size: 17px; 
 
    font-weight: bold; 
 
} 
 

 
.on { 
 
    background-color: #85c452; 
 
    transition: all 0.2s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="switchcontainer"> 
 
    <button id="darkmodeon">ON</button> 
 
    <button id="darkmodeoff">OFF</button> 
 
</div>

出典

2017-07-03 23:43:26

あなたは、クラスとjQueryを使用して簡単にそれを行うことができます。

あなたの「オン」状態のための新しいクラスを作成します。

.on { 
    background-color: #85c452; 
    color: white; 
    transition: all 0.2s ease; 
}

次に、特定のCSSスタイルを設定する代わりに、このクラスをオンとオフに切り替えるようにクリックハンドラを変更します。

$(document).ready(function(){ 
    var darkon = '#darkmodeon'; 
    var darkoff = '#darkmodeoff'; 

    $(darkon).click(function(){ 
     $(this).addClass("on"); 
     $(darkoff).removeClass("on"); 
    }); 

    $(darkoff).click(function(){ 
     $(this).addClass("on"); 
     $(darkon).removeClass("on"); 
    }); 
});

出典

2017-07-03 23:44:52

他のボタンをクリックしてjquery .css（）を削除する方法はありますか？このjqueryのスイッチで

答えて

関連する問題