Question

我面临的问题是我有一张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>

Answer 2

您可以参考以下代码：

https://jsfiddle.net/aLy0qrcv/27/

$(".OpnSeat").on('click', function(e) {
  if ($(this).hasClass("OpnSeat")) {
  //check for ongoing progress
  //check the presence of blue or orange color on DOM elements other than clicked element
    if ($(".openF").not(this).length > 0 || $(".openM").not(this).length > 0) {
      alert("Not allowed, please un-select your previous ");
      return;
    }
  }

  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');
  }

});

Answer 3

只需添加一个条件，检查不同的行是否有橙色或蓝色hasClass和not：

if($(".OpnSeat").not($(this)).hasClass("openF") || $(".OpnSeat").not($(this)).hasClass("openM") ) { 
      alert("not alowed !");
      return;
    }

以下工作示例：

$(document).ready(function(){
  $(".OpnSeat").on('click', function (e) {
    if($(".OpnSeat").not($(this)).hasClass("openF") || $(".OpnSeat").not($(this)).hasClass("openM") ) { 
      alert("not alowed !");
      return;
    }
    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>

点击管理类标记 - javascript

3 个答案: