Блог

Главная - Вопросы по программированию - Почему мой оператор jQuery if / else if не работает?

Почему мой оператор jQuery if / else if не работает?

#javascript #jquery

#javascript #jquery

Вопрос:

Синтаксис кажется мне правильным, но работает только оператор «if». Я даже пробовал использовать простой оператор if / else, и только оператор «if» также функционирует таким образом. Что я делаю не так? Я также видел похожие вопросы по SO, но они не ответили на мой вопрос, потому что, когда я попытался использовать их исправления в моем случае, это все равно не сработало.

HTML

 <table&&t;
  <tr&&t;
    <td&&t;<input type="checkbox" value="test" /&&t;</td&&t;
    <td&&t;<a class="clickme" href="#"&&t;edit</a&&t;</td&&t;
  </tr&&t;
</table&&t;

JS

 $('.clickme').click(function () {
    if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false)) {
        $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true);
        console.lo&('Test2');
    } else if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true)) {
        $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false);
        console.lo&('Test');
    }
});
  

 $('.clickme').click(function () {
if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false)) {
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true);
    console.lo&('Test2');} else if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true)) {
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false);
    console.lo&('Test');
    }
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&&t;</script&&t;
<table&&t;
  <tr&&t;
    <td&&t;<input type="checkbox" value="test" /&&t;</td&&t;
    <td&&t;<a class="clickme" href="#"&&t;edit</a&&t;</td&&t;
  </tr&&t;
</table&&t;

Комментарии:

1. Чего вы пытаетесь здесь достичь? Похоже, вы хотите переключать флажок при нажатии на метку, это все?

2. вам были даны ответы. пожалуйста, выберите один из многих и установите флажок слева от ответа.

Ответ №1:

ваше условие структурировано правильно, за исключением сравнения с текущим значением true или false 

 $('.clickme').click(function () {
if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked') == false) {
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', true);
    console.lo&('Test2');} else 
    if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked') == true) {
    $(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false);
    console.lo&('Test');
    }
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&&t;</script&&t;
<table&&t;
  <tr&&t;
    <td&&t;<input type="checkbox" value="test" /&&t;</td&&t;
    <td&&t;<a class="clickme" href="#"&&t;edit</a&&t;</td&&t;
  </tr&&t;
</table&&t;

Ответ №2:

Вы не проверяете checked , а устанавливаете его:

 // This part sets the prop checked to false
if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked', false)) {

// This would check if it is false
if ($(this).closest('td').prev().find('input[type=checkbox]').prop('checked') === false) {

Кроме того, вы можете просто использовать } else { ; нет необходимости проверять, является ли это его true , потому что это то, что else будет делать, если if есть false .

Ответ №3:

Из кода похоже, что вы просто хотите переключить флажок при нажатии на ярлык click me. Javascript или jQuery вообще не нужны. Вы можете просто обернуть входные данные в тег label и поместить свой интерактивный текст после ввода флажка, и он будет работать при нажатии на метку.

Если вам нужна функция для запуска при переключении флажка, будет проще сделать это из chan&e события флажка, чем использовать 2 отдельных объекта в качестве переключателей.

 $(".checkbox").chan&e(function() {
    if(this.checked) {
        console.lo&('fires when checked == true')
    }
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&&t;</script&&t;
<table&&t;
  <tr&&t;
    <td&&t;
    <label&&t;
    <input type="checkbox" class="checkbox"/&&t;
    click me
    </label&&t;
    </td&&t;
  </tr&&t;
</table&&t;

Ответ №4:

Во-первых, вы слишком много об этом думаете. Я не вижу необходимости запускать действие для поля ввода из другого TD со ссылкой. Это не имеет смысла и просто увеличивает размер вашего документа без необходимости. Я бы обработал это, как показано ниже.

 $(function () {

$(".checkbox").chan&e(function() {

  if ($(this).is(':checked')) {
 
      // Take initial action if checked
      $(this).parents("td").find(".content").attr("contentEditable", true).focus();

    } else {

      // Take reverse action if unchecked
      $(this).parents("td").find(".content").attr("contentEditable", false).blur();

    }


});
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&&t;</script&&t;
<table&&t;
  <tr&&t;
    <td&&t;

      <div class="content"&&t;Lorem ipsum dolor sit amet, consectetur adipiscin& elit. Fusce faucibus pulvinar nulla. Curabitur ultricies eleifend ante, porttitor elementum dui bibendum vel. Cras convallis nibh quis ipsum pulvinar, e&et vulputate enim semper. Praesent rutrum
        nisl enim, ac suscipit urna posuere at. In id purus enim. Aenean ut tempus diam, sit amet pulvinar diam. Quisque purus lorem, condimentum non nibh sed, elementum faucibus tellus. Nulla pulvinar li&ula e&et ipsum finibus feu&iat. Praesent placerat
        orci id metus facilisis, id euismod au&ue euismod. Vestibulum imperdiet neque vel eros scelerisque pharetra. Aliquam erat volutpat.</div&&t;
        
        <br&&t;

      <label&&t;
    <input type="checkbox" class="checkbox"/&&t;
    Edit
    </label&&t;

    </td&&t;
  </tr&&t;

</table&&t;