ボタンのクリックで境界線スタイルを非表示にする

Question

私は何かに取り組んでおり、border-styleと私のborder-colorをボタンを押すと非表示にしたいですか？私は9回、9行持っています。私はボタンをクリックしたときにそれらを隠したいと思って、もう一度クリックすると再びそれらを表示します。

html, 
 
body { 
 
    /* The universe takes up all available space */ 
 
    width: 100%; 
 
    height: 100%; 
 
    /* The universe is black */ 
 
    background-color: black; 
 
    overflow: hidden; 
 
} 
 
#sun { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin-top: -40px; 
 
    margin-left: -40px; 
 
    border-color: orange; 
 
    border-width: 8px; 
 
    border-style: solid; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 64px red; 
 
} 
 
#earth { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin-left: -25px; 
 
    margin-top: -25px; 
 
} 
 
#mercurius { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 30px; 
 
    width: 30px; 
 
    margin-left: -25px; 
 
    margin-top: -25px; 
 
} 
 
#venus { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin-left: -25px; 
 
    margin-top: -25px; 
 
} 
 
#mars { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 40px; 
 
    width: 40px; 
 
    margin-left: -25px; 
 
    margin-top: -25px; 
 
} 
 
#jupiter { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 70px; 
 
    width: 70px; 
 
    margin-left: -25px; 
 
    margin-top: -25px; 
 
} 
 
#saturnus { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 60px; 
 
    width: 60px; 
 
    margin-left: -25px; 
 
    margin-top: -25px; 
 
} 
 
#uranus { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 60px; 
 
    width: 60px; 
 
    margin-left: -25px; 
 
    margin-top: -25px; 
 
} 
 
#neptunes { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin-left: -25px; 
 
    margin-top: -25px; 
 
} 
 
#pluto { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    height: 30px; 
 
    width: 30px; 
 
    margin-left: -25px; 
 
    margin-top: -25px; 
 
} 
 
#mercurius-orbit { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin-top: -85px; 
 
    margin-left: -85px; 
 
    border-width: 2px; 
 
    border-style: dotted; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 9s linear infinite; 
 
    -moz-animation: spin-right 9s linear infinite; 
 
    -ms-animation: spin-right 9s linear infinite; 
 
    -o-animation: spin-right 9s linear infinite; 
 
    animation: spin-right 9s linear infinite; 
 
} 
 
#venus-orbit { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 350px; 
 
    height: 350px; 
 
    margin-top: -135px; 
 
    margin-left: -135px; 
 
    border-width: 2px; 
 
    border-style: dotted; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 10s linear infinite; 
 
    -moz-animation: spin-right 10s linear infinite; 
 
    -ms-animation: spin-right 10s linear infinite; 
 
    -o-animation: spin-right 10s linear infinite; 
 
    animation: spin-right 10s linear infinite; 
 
} 
 
#earth-orbit { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 450px; 
 
    height: 450px; 
 
    margin-top: -185px; 
 
    margin-left: -185px; 
 
    border-width: 2px; 
 
    border-style: dotted; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 11s linear infinite; 
 
    -moz-animation: spin-right 11s linear infinite; 
 
    -ms-animation: spin-right 11s linear infinite; 
 
    -o-animation: spin-right 11s linear infinite; 
 
    animation: spin-right 11s linear infinite; 
 
} 
 
#mars-orbit { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 550px; 
 
    height: 550px; 
 
    margin-top: -235px; 
 
    margin-left: -235px; 
 
    border-width: 2px; 
 
    border-style: dotted; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 12s linear infinite; 
 
    -moz-animation: spin-right 12s linear infinite; 
 
    -ms-animation: spin-right 12s linear infinite; 
 
    -o-animation: spin-right 12s linear infinite; 
 
    animation: spin-right 12s linear infinite; 
 
} 
 
#jupiter-orbit { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 650px; 
 
    height: 650px; 
 
    margin-top: -285px; 
 
    margin-left: -285px; 
 
    border-width: 2px; 
 
    border-style: dotted; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 13s linear infinite; 
 
    -moz-animation: spin-right 13s linear infinite; 
 
    -ms-animation: spin-right 13s linear infinite; 
 
    -o-animation: spin-right 13s linear infinite; 
 
    animation: spin-right 13s linear infinite; 
 
} 
 
#saturnus-orbit { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 750px; 
 
    height: 750px; 
 
    margin-top: -335px; 
 
    margin-left: -335px; 
 
    border-width: 2px; 
 
    border-style: dotted; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 14s linear infinite; 
 
    -moz-animation: spin-right 14s linear infinite; 
 
    -ms-animation: spin-right 14s linear infinite; 
 
    -o-animation: spin-right 14s linear infinite; 
 
    animation: spin-right 14s linear infinite; 
 
} 
 
#uranus-orbit { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 850px; 
 
    height: 850px; 
 
    margin-top: -385px; 
 
    margin-left: -385px; 
 
    border-width: 2px; 
 
    border-style: dotted; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 15s linear infinite; 
 
    -moz-animation: spin-right 15s linear infinite; 
 
    -ms-animation: spin-right 15s linear infinite; 
 
    -o-animation: spin-right 15s linear infinite; 
 
    animation: spin-right 15s linear infinite; 
 
} 
 
#neptunes-orbit { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 950px; 
 
    height: 950px; 
 
    margin-top: -435px; 
 
    margin-left: -435px; 
 
    border-width: 2px; 
 
    border-style: dotted; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 16s linear infinite; 
 
    -moz-animation: spin-right 16s linear infinite; 
 
    -ms-animation: spin-right 16s linear infinite; 
 
    -o-animation: spin-right 16s linear infinite; 
 
    animation: spin-right 16s linear infinite; 
 
} 
 
#pluto-orbit { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 1050px; 
 
    height: 1050px; 
 
    margin-top: -485px; 
 
    margin-left: -485px; 
 
    border-width: 2px; 
 
    border-style: dotted; 
 
    border-color: white; 
 
    border-radius: 50%; 
 
    -webkit-animation: spin-right 17s linear infinite; 
 
    -moz-animation: spin-right 17s linear infinite; 
 
    -ms-animation: spin-right 17s linear infinite; 
 
    -o-animation: spin-right 17s linear infinite; 
 
    animation: spin-right 17s linear infinite; 
 
} 
 
@-webkit-keyframes spin-right { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes spin-right { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    -moz-transform: rotate(360deg); 
 
    -ms-transform: rotate(360deg); 
 
    -o-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
}

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
 
<h2 style="color: white; font-family: 'Roboto', sans-serif; margin-left: 50px; margin-top: 50px;">Zoom out for a better view</h2> 
 
<!-- Right below is an image of the sun --> 
 
<img id="sun" src="http://i.imgur.com/v1KUj9f.png"> 
 

 
<!-- Insert the 'earth' on the next line --> 
 
<div id='earth-orbit'> 
 
    <img id="earth" src="http://i.imgur.com/ThNW8nI.png"> 
 
</div> 
 

 
<div id='mercurius-orbit'> 
 
    <img id="mercurius" src="http://i.imgur.com/AHsmibX.png"> 
 
</div> 
 

 
<div id='venus-orbit'> 
 
    <img id="venus" src="http://i.imgur.com/1Jgxg26.png"> 
 
</div> 
 

 
<div id='mars-orbit'> 
 
    <img id="mars" src="http://i.imgur.com/PdoX4P0.png"> 
 
</div> 
 

 
<div id='jupiter-orbit'> 
 
    <img id="jupiter" src="http://i.imgur.com/qF8mGmG.png"> 
 
</div> 
 

 
<div id='saturnus-orbit'> 
 
    <img id="saturnus" src="http://i.imgur.com/CsEIxeq.png"> 
 
</div> 
 

 
<div id='uranus-orbit'> 
 
    <img id="uranus" src="http://i.imgur.com/aIbM21j.png"> 
 
</div> 
 

 
<div id='neptunes-orbit'> 
 
    <img id="neptunes" src="http://i.imgur.com/joA0iCp.png"> 
 
</div> 
 

 
<div id='pluto-orbit'> 
 
    <img id="pluto" src="http://i.imgur.com/qQvhUuF.png"> 
 
</div> 
 

 
<button>Click</button>

Answer 1

あなたはこれを試すことができます。..

CSS：

.borderless { 
    border-width: 0 !important; 
} 

JS：

$('#btn').click(function() { 
    $('#mercurius-orbit').toggleClass('borderless'); 
    //... for all objects with borders 
}); 

あなたのボタン：

<button id="btn">Click</button> 

Here実施例です。

Answer 2

このヘルプあなた：

<html> 
 
    <head> 
 
     <style> 
 
      .cls { 
 
       border-style: dashed; 
 
       border-color: green; 
 
       width: 200px; 
 
       height: 100px; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div>Hello Lucafraser!</div> 
 
     <br><br> 
 
     <button id="sh">Hide/Show</button> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
     <script> 
 
      $(document).ready(function(){ 
 
       $("#sh").click(function(){ 
 
        $("div").toggleClass("cls"); 
 
       }) 
 
      }) 
 
     </script> 
 
    </body> 
 
</html>

Answer 3

は、私が代わりにIDのクラスを使用するためにHTMLを変更したこの

$("#element").click(function() { 
    $(this).css('border', '') 
}) 

Answer 4

は、につながる同じのためのCSSを変更してみてください次のjsの作業：

HTMLコードの変更、idsのクラスへの変更。例：id="earth-orbit"がclass="earth-orbit orbit js-orbit"に変更され、id="earth"がclass="earth"に変更されました。 .earth-orbitに#earth-orbitと.orbitクラスへの軌道の各クラスからの次のコードを移動：

CSSコードの変更は、クラス、例えばにidを変更し

.orbit { 
    border-width: 2px; 
    border-style: dotted; 
    border-color: white; 
    border-radius: 50%; 
} 

はCSSでボタンにtoggle-orbitクラスを追加しました：次に

.toggle-orbit { 
    z-index: 1000; 
    position: absolute; 
} 

は、次のjQueryを追加：

$('.toggle-orbit').on('click', function() { 
    $('.js-orbit').toggleClass('orbit'); 
}); 

https://jsfiddle.net/5xo2vy65/

クラスがあるため、彼らはCSSの少ない特異性を有し、容易に他のクラスでオーバーライドできるのidの方が良いです：

はここで働いてjsfiddleです。

Answer 5

<html> 
<head> 
<link rel="stylesheet" href="style.css"/> 
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'></head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<style> 
html, body { 
/* The universe takes up all available space */ 
width: 100%; 
height: 100%; 

/* The universe is black */ 
background-color: black; 
overflow: hidden; 
} 

#sun { 
position: absolute; 
top: 50%; 
left: 50%; 

height: 150px; 
width: 150px; 
margin-top: -40px; 
margin-left: -40px; 

border-color: orange; 
border-width: 8px; 
border-style: solid; 
border-radius: 50%; 

box-shadow: 0 0 64px red; 
} 

#earth { 
position: absolute; 
top: 0; 
left: 50%; 

height: 50px; 
width: 50px; 
margin-left: -25px; 
margin-top: -25px; 
} 

#mercurius { 
position: absolute; 
top: 0; 
left: 50%; 

height: 30px; 
width: 30px; 
margin-left: -25px; 
margin-top: -25px; 
} 

#venus { 
position: absolute; 
top: 0; 
left: 50%; 

height: 50px; 
width: 50px; 
margin-left: -25px; 
margin-top: -25px; 
} 

#mars { 
position: absolute; 
top: 0; 
left: 50%; 

height: 40px; 
width: 40px; 
margin-left: -25px; 
margin-top: -25px; 
} 

#jupiter { 
position: absolute; 
top: 0; 
left: 50%; 

height: 70px; 
width: 70px; 
margin-left: -25px; 
margin-top: -25px; 
} 

#saturnus { 
position: absolute; 
top: 0; 
left: 50%; 

height: 60px; 
width: 60px; 
margin-left: -25px; 
margin-top: -25px; 
} 

#uranus { 
position: absolute; 
top: 0; 
left: 50%; 

height: 60px; 
width: 60px; 
margin-left: -25px; 
margin-top: -25px; 
} 

#neptunes { 
position: absolute; 
top: 0; 
left: 50%; 

height: 50px; 
width: 50px; 
margin-left: -25px; 
margin-top: -25px; 
} 

#pluto { 
position: absolute; 
top: 0; 
left: 50%; 

height: 30px; 
width: 30px; 
margin-left: -25px; 
margin-top: -25px; 
} 

#mercurius-orbit { 
position: absolute; 
top: 50%; 
left: 50%; 

width: 250px; 
height: 250px; 
margin-top: -85px; 
margin-left: -85px; 

border-width: 2px; 
border-style: dotted; 
border-color: white; 
border-radius: 50%; 

-webkit-animation: spin-right 9s linear infinite; 
-moz-animation: spin-right 9s linear infinite; 
-ms-animation: spin-right 9s linear infinite; 
-o-animation: spin-right 9s linear infinite; 
animation: spin-right 9s linear infinite; 
} 

#venus-orbit { 
position: absolute; 
top: 50%; 
left: 50%; 

width: 350px; 
height: 350px; 
margin-top: -135px; 
margin-left: -135px; 

border-width: 2px; 
border-style: dotted; 
border-color: white; 
border-radius: 50%; 

-webkit-animation: spin-right 10s linear infinite; 
-moz-animation: spin-right 10s linear infinite; 
-ms-animation: spin-right 10s linear infinite; 
-o-animation: spin-right 10s linear infinite; 
animation: spin-right 10s linear infinite; 
} 

#earth-orbit { 
position: absolute; 
top: 50%; 
left: 50%; 

width: 450px; 
height: 450px; 
margin-top: -185px; 
margin-left: -185px; 

border-width: 2px; 
border-style: dotted; 
border-color: white; 
border-radius: 50%; 

-webkit-animation: spin-right 11s linear infinite; 
-moz-animation: spin-right 11s linear infinite; 
-ms-animation: spin-right 11s linear infinite; 
-o-animation: spin-right 11s linear infinite; 
animation: spin-right 11s linear infinite; 
} 

#mars-orbit { 
position: absolute; 
top: 50%; 
left: 50%; 

width: 550px; 
height: 550px; 
margin-top: -235px; 
margin-left: -235px; 

border-width: 2px; 
border-style: dotted; 
border-color: white; 
border-radius: 50%; 

-webkit-animation: spin-right 12s linear infinite; 
-moz-animation: spin-right 12s linear infinite; 
-ms-animation: spin-right 12s linear infinite; 
-o-animation: spin-right 12s linear infinite; 
animation: spin-right 12s linear infinite; 
} 

#jupiter-orbit { 
position: absolute; 
top: 50%; 
left: 50%; 

width: 650px; 
height: 650px; 
margin-top: -285px; 
margin-left: -285px; 

border-width: 2px; 
border-style: dotted; 
border-color: white; 
border-radius: 50%; 

-webkit-animation: spin-right 13s linear infinite; 
-moz-animation: spin-right 13s linear infinite; 
-ms-animation: spin-right 13s linear infinite; 
-o-animation: spin-right 13s linear infinite; 
animation: spin-right 13s linear infinite; 
} 

#saturnus-orbit { 
position: absolute; 
top: 50%; 
left: 50%; 

width: 750px; 
height: 750px; 
margin-top: -335px; 
margin-left: -335px; 

border-width: 2px; 
border-style: dotted; 
border-color: white; 
border-radius: 50%; 

-webkit-animation: spin-right 14s linear infinite; 
-moz-animation: spin-right 14s linear infinite; 
-ms-animation: spin-right 14s linear infinite; 
-o-animation: spin-right 14s linear infinite; 
animation: spin-right 14s linear infinite; 
} 

#uranus-orbit { 
position: absolute; 
top: 50%; 
left: 50%; 

width: 850px; 
height: 850px; 
margin-top: -385px; 
margin-left: -385px; 

border-width: 2px; 
border-style: dotted; 
border-color: white; 
border-radius: 50%; 

-webkit-animation: spin-right 15s linear infinite; 
-moz-animation: spin-right 15s linear infinite; 
-ms-animation: spin-right 15s linear infinite; 
-o-animation: spin-right 15s linear infinite; 
animation: spin-right 15s linear infinite; 
} 

#neptunes-orbit { 
position: absolute; 
top: 50%; 
left: 50%; 

width: 950px; 
height: 950px; 
margin-top: -435px; 
margin-left: -435px; 

border-width: 2px; 
border-style: dotted; 
border-color: white; 
border-radius: 50%; 

-webkit-animation: spin-right 16s linear infinite; 
-moz-animation: spin-right 16s linear infinite; 
-ms-animation: spin-right 16s linear infinite; 
-o-animation: spin-right 16s linear infinite; 
animation: spin-right 16s linear infinite; 
} 

#pluto-orbit { 
position: absolute; 
top: 50%; 
left: 50%; 

width: 1050px; 
height: 1050px; 
margin-top: -485px; 
margin-left: -485px; 

border-width: 2px; 
border-style: dotted; 
border-color: white; 
border-radius: 50%; 

-webkit-animation: spin-right 17s linear infinite; 
-moz-animation: spin-right 17s linear infinite; 
-ms-animation: spin-right 17s linear infinite; 
-o-animation: spin-right 17s linear infinite; 
animation: spin-right 17s linear infinite; 
} 

@-webkit-keyframes spin-right { 
100% { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 
} 

@keyframes spin-right { 
100% { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 
} 
</style> 
<body> 

<h2 style="color: white; font-family: 'Roboto', sans-serif; margin-left: 50px; margin-top: 50px;">Zoom out for a better view</h2> 
<!-- Right below is an image of the sun --> 
<img id="sun" src="http://i.imgur.com/v1KUj9f.png"> 

<!-- Insert the 'earth' on the next line --> 
<div id='earth-orbit' class="r3"> 
<img id="earth" src="http://i.imgur.com/ThNW8nI.png"> 
</div> 

<div id='mercurius-orbit' class="r1"> 
<img id="mercurius" src="http://i.imgur.com/AHsmibX.png"> 
</div> 

<div id='venus-orbit' class="r2"> 
<img id="venus" src="http://i.imgur.com/1Jgxg26.png"> 
</div> 

<div id='mars-orbit' class="r4"> 
<img id="mars" src="http://i.imgur.com/PdoX4P0.png"> 
</div> 

<div id='jupiter-orbit' class="r5"> 
<img id="jupiter" src="http://i.imgur.com/qF8mGmG.png"> 
</div> 

<div id='saturnus-orbit' class="r6"> 
<img id="saturnus" src="http://i.imgur.com/CsEIxeq.png"> 
</div> 

<div id='uranus-orbit' class="r7"> 
<img id="uranus" src="http://i.imgur.com/aIbM21j.png"> 
</div> 

<div id='neptunes-orbit' class="r8"> 
<img id="neptunes" src="http://i.imgur.com/joA0iCp.png"> 
</div> 

<div id='pluto-orbit' class="r9"> 
<img id="pluto" src="http://i.imgur.com/qQvhUuF.png"> 
</div> 

<button class="border_none">Click</button> 

<script> 
$(document).ready(function(){ 
    var iCnt = 10; 

     $(".border_none").click(function(){ 
      iCnt--; 
       $(".r" + iCnt).css("border","10px dashed #ccc"); 

      if(iCnt==0){ 
       for(iCnt=0;iCnt<=10;iCnt++){ 
        $(".border_none").click(function(){ 
         $(".r" + iCnt).css("border","2px dashed #ccc"); 
        }); 
       } 
       } 

      }); 




}); 


</script> 

</body> 
</html>