定语工作不正常

我做了下面的例子来说明我的问题：定语工作不正常

$("tr > td > #arm").on("click", function() { 
 
    $(this).parent().children("#arm").prop("disabled", true); 
 
    $(this).parent().children("#disarm").prop("disabled", false); 
 
}); 
 

 
$("tr > td > #disarm").on("click", function() { 
 
    $(this).parent().children("#arm").prop("disabled", false); 
 
    $(this).parent().children("#disarm").prop("disabled", true);; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <button id="arm" disabled>Arm</button> 
 
    </td> 
 
    <td> 
 
     <button id="disarm">Disarm</button> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<script> 
 
</script>

我有以上table使用包含2 cells一个row并在每个cell一个button 。其中之一是disabled所以我做了一个脚本，当我按下第二个button它应该启用第一个并禁用被点击的脚本。

禁用被点击的button正如我所料，但我不知道为什么它不启用其他button。

来源

2016-08-17 Marian Pavel

'id'必须在整个页面是唯一的。如果你的真实代码中有多行，这将是一个问题。改用'class'或'name'。 –

元素'id's必须是唯一的，所以当你使用它们时，不需要使用遍历函数。尝试直接选择它们。 –

如果你点击按钮，你为什么选择它的父母，并重新选择你刚才点击的按钮？ – epascarello

你是不是选择正确的元素。您的代码是

$(this).parent().children("#disarm")

其中$(this)是#arm元素，那么parent()是TD手机。

所以基本上你正在寻找该小区的儿童元素（#disarm），这就是为什么他不能找到它

尝试用这个代替

$("tr > td > #arm").on("click", function() { 
    $(this).prop("disabled", true); 
    $(this).closest("tr").find("#disarm").prop("disabled", false); 
}); 

$("tr > td > #disarm").on("click", function() { 
    $(this).closest("tr").find("#arm").prop("disabled", false); 
    $(this).prop("disabled", true); 
});

这你的代码:)

来源

2016-08-17 13:01:38 pumpkinzzz

我已经对你的代码和作品进行了更改，这很奇怪，因为我先用两个父（）（这是我选择的行）进行测试，然后用小孩选择按钮。 –

@PavelMarian也许你改变了HTML结构？这就是为什么我**从来没有**使用'parent（）'或'children（）'等..因为改变HTML会危及你的js代码 – pumpkinzzz

我只改变一些属性，没有什么大的改变。 –

尝试总计从元素中删除禁用属性。据我所知，并非所有浏览器正确使用disable =“false”

来源

2016-08-17 12:58:59 Vitalii

你可以添加一个类，然后使用道具的功能如下的WORKING DEMO

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td> 
        <button id="arm" disabled class="test">Arm</button> 
       </td> 
       <td> 
        <button id="disarm" class="test">Disarm</button> 
       </td> 
      </tr> 
     </table> 

     <script> 
     $('.test').click(function(){ 
      $(".test").prop('disabled', function() { 
    return ! $(this).prop('disabled'); 
}); 
}); 
     </script> 
    </body> 
</html>

DEMO

描述：我添加了一个类测试，以所有的按钮，然后我使用的道具功能。因此，在其上点击事件发生的按钮被禁用，其余全部被启用

来源

2016-08-17 13:02:30 SpringLearner

你需要使用prev和next

$("tr > td > #arm").on("click", function() { 
    $(this).parent().children("#arm").prop("disabled", true); 
    $(this).parent().next().children("#disarm").prop("disabled", false); 
}); 
$("tr > td > #disarm").on("click", function() { 
    $(this).parent().prev().children("#arm").prop("disabled", false); 
    $(this).parent().children("#disarm").prop("disabled", true);; 
});

https://jsfiddle.net/hfr33exa/1/

来源

2016-08-17 13:03:56

这是你的问题的解决方案。使用removeAttr删除元素的禁用。

  <table> 
      <tr> 
       <td> 
        <button id="arm" disabled>Arm</button> 
       </td> 
       <td> 
        <button id="disarm">Disarm</button> 
       </td> 
      </tr> 
     </table> 

     <script> 
      $("tr > td > #arm").on("click", function() { 
       $("#arm").prop("disabled", true); 
       $("#disarm").removeAttr("disabled"); 
      }); 

      $("tr > td > #disarm").on("click", function() { 
       $("#arm").removeAttr("disabled"); 
       $("#disarm").prop("disabled", true);; 
      }); 
     </script>

这里是一个工作示例

来源

2016-08-17 13:12:47

的jsfiddle没有理由选择父母，当你点击按钮。

$(this).parent().children("#arm").prop("disabled", true);

应该只是

$(this).prop("disabled", false);

现在，当你想接你做其他的元素。

你挑按钮
你找其他按钮元件内的父。

问题是按钮是在父母的兄弟姐妹。但是当你拥有身份证时，没有必要选择父母。只需选择它的ID即可开始，速度会更快。

$("table tbody").on("click", "button", function() { 
 
    var btn = $(this).prop("disabled", true); 
 
    var opposite = btn.attr("id") === "disarm" ? "#arm" : "#disarm"; 
 
    $(opposite).prop("disabled", false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <button id="arm" disabled>Arm</button> 
 
    </td> 
 
    <td> 
 
     <button id="disarm">Disarm</button> 
 
    </td> 
 
    </tr> 
 
</table>

来源

2016-08-17 13:17:50 epascarello

定语工作不正常

回答

相关问题