的Javascript removeClass（）問題

這裏是CSS代碼：的Javascript removeClass（）問題

.big-square { 
position:relative; 
height:768px; 
width:768px; 
border:1px solid black; 
background-color:#007da9; 
text-align:center; 
display:table-cell; 
-webkit-transition:all 0.3s linear;

}

，這裏的HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
    <script> 
    function showmenu() { 
     $(document).ready(function() { 
      $("#big-square").removeClass("big-square"); 
     }); 
    } 
    </script> 
</head> 
<body> 
    <div id="big-square" onclick="showmenu();" class="big-square">1</div> 
    <div id="big-square" onclick="showmenu();" class="big-square">2</div>

問題是，當我點擊廣場的任何人，只是第一個消失，我想分開消失。例如，如果我點擊第二個廣場，第二個廣場消失。

來源

2015-06-09 Garrett

首先，你不能有2個元素具有相同的ID – Vic

id在整個DOM中必須是唯一的。（和相關職能只返回第一個）

你想要的是

$(document).ready(function() { 
 
    $(".big-square").on('click', function() { 
 
    $(this).removeClass("big-square"); 
 
    }); 
 
});

.big-square { 
 
    position: relative; 
 
    height: 768px; 
 
    width: 768px; 
 
    border: 1px solid black; 
 
    background-color: #007da9; 
 
    text-align: center; 
 
    display: table-cell; 
 
    -webkit-transition: all 0.3s linear; 
 
}

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

 
<div class="big-square">1</div> 
 
<div class="big-square">2</div>

來源

2015-06-09 21:13:07

謝謝！這項工作非常好！ :-) – Garrett

這是新手的編碼。讓我們試着去解決它：

1 - 不同的ID對每個元素（如用戶維克已指出）

2 - $（文件）。就緒不需要嵌套

3 - 的onclick = 「showmenu（）;」完全unnecesary，它包括在HTML腳本是現代網絡的發展是不好的做法

，因爲我看到你已經有代碼:)答案我不會發布任何代碼

來源

2015-06-09 21:14:52 user2755140

這是非法的HTML有ID的未獨一無二。如果您打算擁有2個或更多類似'東西'的元素，請改爲使用類。然後，你不應該在一個函數中嵌套ready語句。接下來，您不應使用onclick，而應選擇聽取事件點擊。另外，css .class與您的html的id不匹配。最後只定位1個項目，我會使用jQuery對象$(this)。

所以，所有的說，我會重新寫你的代碼爲：

<script> 
$(document).ready(function() { 
     $(".big-square").click(function() { 
      $(this).removeClass("big-square"); 
    }); 
}); 
</script> 
</head> 
<body> 
    <div class="big-square" id="square1">1</div> 
    <div class="big-square" id="square2">2</div>

來源

2015-06-09 21:15:26 briansol

的Javascript removeClass（）問題

回答

相關問題