javascript - Jquery/Javascript(从 ID 转换为类)

Question

我做了这个脚本。但现在我需要将这些 id 转换为类，因为我应该将它放在页面的其他元素中。

卡片--->.卡片

翻转--->.翻转

 var init = function() {
      var card = document.getElementById('card');
      
      document.getElementById('flip').addEventListener( 'click', function(){
        card.toggleClassName('flipped');
      }, false);
    };
    
    window.addEventListener('DOMContentLoaded', init, false);

你能帮帮我吗？

解决方案:

$(function() {
  var card = $('.card');
  
  $('.flip').on( "click", function(){
    card.toggleClass('flipped');
    return false;
  });
});

Answer 1

由于您已使用 jquery 进行标记，我会给这个:

// Once document is loaded,
$(function () {
  // Change all the `#card`, `#flip` to classes:
  $("#card, #flip").addClass(function () { return this.id; }).removeAttr("id");
});

首先它选择所有的 #card 和 #flip，应该只有 2 个元素。它将它们各自的 id 添加为 class 并删除 id 属性。

片段

// Once document is loaded,
$(function () {
  // Change all the `#card`, `#flip` to classes:
  $("#card, #flip").addClass(function () { return this.id; }).removeAttr("id");
});

.card {background: #f99;}
.flip {background: #9f9;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="card">Card</div>
<div id="flip">Flip</div>

如果你只想添加额外的类，那么你可以使用这个:

$(function() {
  var card = $('.card');

  $('.flip').on( "click", function(){
    card.toggleClass('flipped');
    return false;
  });
});