Question

该语法对我来说似乎是正确的，但是只有“ if”语句起作用。我什至尝试仅使用一个简单的if / else语句，并且只有“ if”语句也是如此。我究竟做错了什么？我也曾在SO上看到过类似的问题，但是他们没有回答我的问题，因为当我尝试在我的案例中使用他们的更正时，它仍然没有用。

HTML

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

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.log('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.log('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.log('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.log('Test');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" value="test" /></td>
    <td><a class="clickme" href="#">edit</a></td>
  </tr>
</table>

Answer 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.log('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.log('Test');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" value="test" /></td>
    <td><a class="clickme" href="#">edit</a></td>
  </tr>
</table>

Answer 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就会这样做。

Answer 3

在代码中，单击“单击我”标签后，您似乎只想切换复选框。完全不需要Javascript或JQuery。您可以将输入内容包装在标签标签中，然后将可点击的文本放在复选框输入的后面，点击标签后即可使用。

如果您需要一个功能在切换复选框时运行，那么与使用2个单独的对象作为切换对象相比，从复选框的change事件开始执行操作会容易得多。

$(".checkbox").change(function() {
    if(this.checked) {
        console.log('fires when checked == true')
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
    <label>
    <input type="checkbox" class="checkbox"/>
    click me
    </label>
    </td>
  </tr>
</table>

Answer 4

首先，您想得太多。我看不到必须通过链接从另一个TD触发输入字段的操作。那不是语义，它只是不必要地增加了文档的大小。我将按如下所示进行处理。

$(function () {

$(".checkbox").change(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"></script>
<table>
  <tr>
    <td>

      <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce faucibus pulvinar nulla. Curabitur ultricies eleifend ante, porttitor elementum dui bibendum vel. Cras convallis nibh quis ipsum pulvinar, eget 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 ligula eget ipsum finibus feugiat. Praesent placerat
        orci id metus facilisis, id euismod augue euismod. Vestibulum imperdiet neque vel eros scelerisque pharetra. Aliquam erat volutpat.</div>
        
        <br>

      <label>
    <input type="checkbox" class="checkbox"/>
    Edit
    </label>

    </td>
  </tr>

</table>

为什么我的jQuery if / else if语句不起作用？

4 个答案: