0

我正在努力使用 jQuery。我想编写一个脚本来检查单击该按钮时与该按钮共享同一父项（列表项）的文本区域是否为只读。这是HTML：

...
<li>
  <h1>Title</h1>
  <button type="button" onclick="javascript:confirmDelete();">Delete</button>
  <button type="button" onclick="javascript:toggle();">Toggle</button>
  <textarea class="readOnly" readonly="true">Some text</textarea>
</li>
...

和脚本：

<script language="JavaScript">
  <!--
  ...    
  function toggle()
  {
    var textArea = $(this).parent("li").children("textarea");
    var isReadOnly = textArea.attr("readonly");
    if (isReadOnly == "true") {
      alert('It\'s read-only.');
    } else {
      alert('It\'s not read-only.');
    }
  }
  //-->
</script>

看来我无法通过var textArea = ...

更新1：

好的，为了帮助自己分析问题，我分解了选择：

...
var btn = $(this);
console.log(btn); //returns value, but not sure what exactly
var li = btn.parent();
console.log(li); //returns value, but not sure what exactly
var textArea = li.children('textarea');
console.log(textArea.prop('tagName')); //returns unidentified

所以，有错误。我似乎无法理解实际出了什么问题，因为如果我从调试中获得的所有输出都是一个对象（我什至不知道它代表什么；它是一个元素还是数组），我无法真正学到很多东西。 ..) 或unidentified. jQuery 并不完全直观。

4

3 回答 3

0

该属性区分大小写。试试吧

var isReadOnly = textArea.attr("readOnly");
于 2013-02-04T23:26:37.067 回答
0

如果它是您唯一可能需要的：

...find("textarea")[0];

不是

...children("textarea");

或者干脆$(this).siblings("textarea")[0];

或直接选择

var mylist = $(this).siblings("textarea.readOnly");

if (mylist.length > 0)//true if it is
于 2013-02-04T23:29:22.347 回答
0

这里有一些错误。

首先，事实证明，当属性“readonly”处于活动状态时，它没有“true”值，而是“readonly”值。

另一方面，如果你通过 onclick 调用一个函数（我不是 100% 确定），你不能使用 $(this)。我建议你这样做（在给触发按钮一些 ID 或任何识别它的东西之后）：

$(function() {

  $("button#my-button").bind("click", function() {
    if ($(this).siblings("textarea").attr("readonly") == "readonly") {
      alert("It's readonly");
    } else {
      alert ("It's not");
    }
  });

});
于 2013-02-05T00:07:21.643 回答