Question

我正在制作一个简单的游戏，您和合作伙伴必须通过轮流点击<td>标记来绘制内容。现在我可以点击<td>它会变成黑色，但它应该在第二次点击时变为白色。第二个.click有效，我知道这是因为0和1会发出警报，但不会发出2。

$("td").click(function(){
    alert(0);
    alert($(this).css('background-color')); // alerts rgb(0, 0, 0)
    if($(this).css('background-color') == 'rgb(255, 255, 255)' || 'rgba(0,0,0,0)'){
        $(this).css('background-color', 'black');
        alert(1);
        var color = 'black';
    } else{
        alert(2);
        $(this).css('background-color', 'white');
        var color = 'white';
    }
    //alert(event.target.id);
    update( event.target.id, color);
});

它也在阅读所有伟大的内容

function read(){
    $.post("ajax.php",
        {
            read: '1',
        },
        function(data){
            values=data.split('*');
            //alert(values[1]);
            var id = '#' + values[0]+ '';
            //alert(id);
            $( id ).css('background-color', values[1]);
        }
    );
}

我添加了HTML表，但它是用PHP构建的，通常是25乘25但是为了更容易，我用5乘5代表简化它

<table>
    <tr>
        <td style="height: 21px; width: 21px; background-color:white;" id="a1"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="a2"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="a3"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="a4"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="a5"></td>
    </tr>
    <tr>
        <td style="height: 21px; width: 21px; background-color:white;" id="b1"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="b2"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="b3"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="b4"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="b5"></td>
    </tr>
    <tr>
        <td style="height: 21px; width: 21px; background-color:white;" id="c1"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="c2"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="c3"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="c4"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="c5"></td>
    </tr>
    <tr>
        <td style="height: 21px; width: 21px; background-color:white;" id="d1"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="d2"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="d3"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="d4"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="d5"></td>
    </tr>
    <tr>
        <td style="height: 21px; width: 21px; background-color:white;" id="e1"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="e2"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="e3"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="e4"></td>
        <td style="height: 21px; width: 21px; background-color:white;" id="e5"></td>
    </tr>
</table>

如果有人可以提供帮助那就太棒了。谢谢

Answer 1

我建议这样做：

<强> CSS

<html>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<ul>
  <li>
    <a href="http://www.imdb.com/title/tt1232829/" target="_blank">
      <h1>21 Jump Street</h1>
      <h2>2012</h2>
    </a>
  </li>
  <li>
    <a href="http://www.imdb.com/title/tt2294449/" target="_blank">
      <h1>22 Jump Street</h1>
      <h2>2014</h2>
    </a>
  </li>
  <li>
    <a href="http://www.imdb.com/title/tt1637725/" target="_blank">
      <h1>Ted</h1>
      <h2>2012</h2>
    </a>
  </li>
</ul>

<强>的JavaScript

.black {
  background-color: black;
}
.white {
  background-color: white;
}

然后在你的AJAX中：

$("td").click(function(event) {
  alert(0);
  alert($(this).hasClass("black") ? "Black" : "White"); // alerts rgb(0, 0, 0)
  if ($(this).hasClass("white")) {
    $(this).removeClass("white").addClass("black");
    alert(1);
    var color = 'black';
  } else {
    alert(2);
    $(this).removeClass("black").addClass("white");
    var color = 'white';
  }
  update(event.target.id, color);
});

正如@KevinB所建议的那样，这也是一个选择：

function read() {
  $.post("ajax.php", {
      read: '1',
    },
    function(data) {
      values = data.split('*');
      $.each(values, function(k, v) {
        $("#" + v[0]).toggleClass("black white");
      });
    }
  );
}

<强>更新

HTML代码中的工作示例：https://jsfiddle.net/Twisty/7tnpm90j/

jquery .click在.css更改之后不会工作

1 个答案: