javascript - 单击时管理 类标签 - javascript

Question

我面临的问题是我有一张 table 有 5 <td> . <td> 的默认颜色是红色的，如果用户第一次点击它，它的颜色会变成蓝色，如果用户第二次点击它，它会变成橙色，第三次它会变回红色，然后继续。

我想要的是，如果<td>中的任何一个|有蓝色或橙色，用户点击任何其他 <td>改变它的颜色，它应该提醒他“不允许，请取消选择你以前的”，然后用户点击选择的<td>将其颜色改回红色，然后选择他想要的任何其他颜色。

这是我的代码示例:

$(".OpnSeat").on('click', function(e) {
  if ($(this).attr("class") == "OpnSeat seat_td") {
    $(this).addClass('openM seat_td');
  } else if ($(this).attr("class") == "OpnSeat seat_td openM") {
    $(this).removeClass('openM seat_td');
    $(this).addClass('openF seat_td');
  } else if ($(this).attr("class") == "OpnSeat openF seat_td") {
    $(this).removeClass('openM seat_td openM');
    $(this).removeClass('openF seat_td openM');
    $(this).addClass('OpnSeat seat_td');
  }
});

.seat_td {
  width: 60px;
  margin-right: 10px
}

.OpnSeat {
  color: red;
  border: 2px solid red;
}

.openM {
  color: blue;
  border: 2px solid blue;
}

.openF {
  color: orange;
  border: 2px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="OpnSeat seat_td">
      <p class="intxt">1</p>
    </td>
    <td class="OpnSeat seat_td">
      <p class="intxt">2</p>
    </td>
    <td class="OpnSeat seat_td">
      <p class="intxt">3</p>
    </td>
    <td class="OpnSeat seat_td">
      <p class="intxt">4</p>
    </td>
    <td class="OpnSeat seat_td">
      <p class="intxt">5</p>
    </td>
  </tr>

</table>

这是工作 JSFIDDLE

我的英语不好，我希望我能表达我的问题，任何想法或暗示都将不胜感激。

Answer 1

最简单的方法是使用hasClass。

这是一个小例子:

$(".OpnSeat").on('click', function (e) {
  if($(".OpnSeat").hasClass('openM') && !$(this).hasClass('openM')) {
    alert('not allowed');
  } else {
    if ($(this).attr("class") == "OpnSeat seat_td") {
      $(this).addClass('openM seat_td');
    } else if ($(this).attr("class") == "OpnSeat seat_td openM") {
      $(this).removeClass('openM seat_td');
      $(this).addClass('openF seat_td');
    } else if ($(this).attr("class") == "OpnSeat openF seat_td") {
      $(this).removeClass('openM seat_td openM');
      $(this).removeClass('openF seat_td openM');
      $(this).addClass('OpnSeat seat_td');
    }
  }
});

.seat_td {
  width:60px;
  margin-right:10px
}
.OpnSeat {
  color:red;
  border:2px solid red; 
}
.openM {
  color:blue;
  border:2px solid blue; 
}
.openF{
  color:orange;
  border:2px solid orange; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td class="OpnSeat seat_td"><p class="intxt">1</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">2</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">3</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">4</p></td>
  <td class="OpnSeat seat_td"><p class="intxt">5</p></td>
</tr>

</table>