bugfix> javascript > 投稿

JavaScriptを使用して、div要素を作成し、一連のクラスを含む配列から特定のクラスを割り当て、ランダムメソッドを使用してランダムな順序でHTML要素にクラスを割り当てます。次に、ボタンクリックイベントなどのイベントに基づいて、HTML要素が持つクラスのセットから特定のクラスを削除し、特定のクラスを追加します。

問題は、削除する必要のある正確なクラス名がわからないことですが、クラスがそのようなもので始まるように、私はそれについてほとんど知りません。そのため、特定のHTML要素を選択し、クリックイベントのボタンなどのイベントでそのHTML要素から特定のクラスを削除できるjQueryまたはJavaScriptコードが必要になります。

この問題を解決するためにJavaScriptでonclickボタン処理関数にいくつかのコードを書きました。

var position=["tile-position-1-1", "tile-position-2-1", "tile-position-3-1", "tile-position-4-1",
                "tile-position-1-2", "tile-position-2-2", "tile-position-3-2", "tile-position-4-2",
                "tile-position-1-3", "tile-position-2-3", "tile-position-3-3", "tile-position-4-3",
                "tile-position-1-4", "tile-position-2-4", "tile-position-3-4", "tile-position-4-4"];
 $("#start").on("click", function(){
   var ele='<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new">'+
            '<div class="tile-inner">2</div></div>'+
            '<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new">'+
            '<div class="tile-inner">2</div></div>';
     $('.tile-container').append(ele);
 });
$("#left").on("click", function(){
  var arr=[];
  arr=$(".tile-container").find('*').filter(function(){
    return $(this).attr("class").match(/tile-position\-*/);
  });
  for(i=0;i<4;i++)
      for(j=0;j<4;j++){
        arr.removeClass(`tile-position-${i+1}-${j+1}`)
    }
    arr.addClass('tile-position-1-4');
   $('.tile-container')
   var ele1='<div class="tile tile-2 '+position[Math.floor(Math.random()*16)]+' tile-new"><div class="tile-inner">2</div>';
      $(".tile-container").append(ele1);
});

html, body {
  margin: 0;
  padding: 0; }
.btn-container{
  margin-top: 30px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}
button{
  color: #0099CC;
  background: #0099CC;
  border: 2px solid black;
  border-radius: 6px;
  color: black;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}
.container{
  width: 500px ;
  margin: 0 auto;
}
.game-container {
  margin-top: 40px;
  position: relative;
  padding: 15px;
  background: #345;
  border-radius: 2px;
  width: 500px;
  height: 500px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
.grid-container {
  position: absolute;
  z-index: 1; }
.grid-row {
  margin-bottom: 15px;
}
.grid-row:after {
    content: "";
    display: block;
    clear: both;
}
.grid-cell {
  width: 106.25px;
  height: 106.25px;
  margin-right: 15px;
  float: left;
  background: #0099CC;
}
.tile-container {
  position: absolute;
  z-index: 2; }
.tile, .tile .tile-inner {
  width: 107px;
  height: 107px;
  line-height: 107px; }
.tile.tile-position-1-1 {
  transform: translate(0px, 0px); }
.tile.tile-position-1-2 {
  transform: translate(0px, 121px); }
.tile.tile-position-1-3 {
  transform: translate(0px, 242px); }
.tile.tile-position-1-4 {
  transform: translate(0px, 363px); }
.tile.tile-position-2-1 {
  transform: translate(121px, 0px); }
.tile.tile-position-2-2 {
  transform: translate(121px, 121px); }
.tile.tile-position-2-3 {
  transform: translate(121px, 242px); }
.tile.tile-position-2-4 {
  transform: translate(121px, 363px); }
.tile.tile-position-3-1 {
  transform: translate(242px, 0px); }
.tile.tile-position-3-2 {
  transform: translate(242px, 121px); }
.tile.tile-position-3-3 {
  transform: translate(242px, 242px); }
.tile.tile-position-3-4 {
  transform: translate(242px, 363px); }
.tile.tile-position-4-1 {
  transform: translate(363px, 0px); }
.tile.tile-position-4-2 {
  transform: translate(363px, 121px); }
.tile.tile-position-4-3 {
  transform: translate(363px, 242px); }
.tile.tile-position-4-4 {
  transform: translate(363px, 363px); }
.tile {
  position: absolute;
  -webkit-transition: 100ms ease-in-out;
  -moz-transition: 100ms ease-in-out;
  transition: 100ms ease-in-out;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform; }
.tile .tile-inner {
   border-radius: 3px;
   background: #eee4da;
   text-align: center;
   font-weight: bold;
   z-index: 10;
   font-size: 55px; }

<html>
 <head>
   <title>2048</title>
   <link href="mil.css" rel="stylesheet" type="text/css">
   </head>
 <body>
   <div class="container">
      <div class="game-container">
          <div class="grid-container">
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
        <div class="grid-row">
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
          <div class="grid-cell"></div>
        </div>
      </div>
      <div class="tile-container">
      </div>
    </div>
   </div>
   <div class="btn-container">
       <button id="left" type="button" >LEFT</button>
       <button id="right" type="button" >RIGHT</button>
       <button id="up" type="button" >UP</button>
       <button id="down" type="button" >DOWN</button>
       <button id="start" type="button" >START</button>
   </div>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="mil.js"></script>
    </body>
  </html>

回答 1 件
  • 以下の関数は、クラス名が指定されたフレーズで始まるすべての要素を検索し、クラスリストからそのクラスを削除します。

    function removeClass( phrase ) {
      var element = $( '*[class^="' + phrase + '"], *[class*=" ' + phrase + '"]' );
      element.each( function () {
        var classList = $( this ).attr( 'class' ).split( ' ' );
        for ( var i = 0; i < classList.length; i++ ) {
          if ( classList[ i ].search( phrase ) != -1 ) {
            delete classList.splice( i, 1 )
          }
        }
        $( this ).attr( 'class', classList.join( ' ' ) )
      } )
    }
    
    
    .abcd_class {
      color: red
    }
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="class1 abcd_class">The phrase exists in the class list.</div>
    <div class="abcd_class class1">The phrase exists in the class list.</div>
    <div class="class1">The phrase does'nt exist in the class list.</div>
    <div class="class1 class2 abcd">The phrase does'nt exist in the class list.</div>
    <div class="abcd_class abcdclass">The phrase exists in the class list.</div>
    <input name="" type="button" value="Remove Class" onclick="removeClass( 'abcd_' )" />
    
    

あなたの答え