JS в jQuery преобразование - PullRequest
Новая
       0

JS в jQuery преобразование

0 голосов
/ 28 мая 2020

Пытаясь преобразовать код JS в jQuery, не получается заставить его работать после первого оператора if.

JS Решение 

var squares = document.querySelectorAll("td");

function fill() {
    if (this.textContent == '') {
        this.textContent = 'X'
    }else if (this.textContent == 'X') {
        this.textContent = 'O'
    }else{
        this.textContent = ''
    }
}

for (var index = 0; index < squares.length; index++) {
    squares[index].addEventListener('click',fill)
}

jQuery попытка 

$('td').click(fill)

function fill() {
    if ($(this).text("")) {
        $(this).text("X")
    }else if ($(this).text("X")) {
        $(this).text("O")

    }else {
        $(this).text("")
    }
}

Ответы [ 4 ]

1 голос
/ 28 мая 2020

Вы можете изменить на jquery путем изменения text() функцию в событии click как 

$('td').click(function(){
  if ($(this).text() == '') {
        $(this).text('X')
    }else if ($(this).text() == 'X') {
        $(this).text('O')
    }else{
        $(this).text('')
    }
})


var squares = document.querySelectorAll("td");


$('td').click(function(){
  if ($(this).text() == '') {
        $(this).text('X')
    }else if ($(this).text() == 'X') {
        $(this).text('O')
    }else{
        $(this).text('')
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>



<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>X</td>
    <td>O</td>
    <td></td>
  </tr>

 
</table>

</body>
</html>
0 голосов
/ 28 мая 2020

Я думаю, что вы хотите это сделать 

$('td').click(fill)

function fill() {
  if (!$(this).text()) {
    $(this).text("X")
  } else if ($(this).text() == "X") {
    $(this).text("O")
  } else {
    $(this).text("")
  }
}
0 голосов
/ 28 мая 2020

Чтобы получить текст тега td, вы можете использовать .text()

$('td').click(fill);

function fill() {
    if ($(this).text() == "") {
        $(this).text("X")
    }else if ($(this).text() == "X") {
        $(this).text("O")    
    }else {
        $(this).text("")
    }
}

Вы можете увидеть мой код в этой демонстрации: https://codepen.io/phuongnm153/pen/pojXzjE

0 голосов
/ 28 мая 2020

В условии, если вы пытаетесь установить значение . 

$('td').click(fill)

function fill() {
   if ($(this).text()) {
      $(this).text("X")
   }else if ($(this).text() == "X") {
      $(this).text("O")
   }else {
      $(this).text("")
   }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...