5

HTML フォームに複数のテキストエリアがあり、それぞれに編集リンクが続きます。編集リンクをクリックすると、対応するテキストエリアが有効になります。私のコードは次のとおりです。

<script type="text/javascript">

    $(document).ready(function() {

        $(".edit").click(function(){
            $(this).attr("id").removeAttr("disabled");
        });

    });  

</script>

<textarea  id="txt1"  disabled="true"></textarea>
<a class="edit" id="txt1" >edit</a>

<textarea  id="txt2"  disabled="true"></textarea>
<a class="edit" id="txt2" >edit</a>

対応するリンクをクリックしたときにテキストエリアが有効にならないのはなぜですか?

4

5 に答える 5

6

ids はページ内で 1 回だけ使用できます。同じ ID を持つ要素を 2 つ (またはそれ以上) 持つことはできません。

代わりに、これを行います：

<form id="myform">
    <!-- group each in divs -->
    <div>
        <textarea disabled="true"></textarea>
        <a class="edit">edit</a>
    </div>
    <div>
        <textarea disabled="true"></textarea>
        <a class="edit">edit</a>
    </div>
</form>
<script>
    $(function(){
        $('#myform').on('click','.edit',function(){ 
            $(this)                       //when edit is clicked
                .siblings('textarea')     //find it's pair textarea
                .prop("disabled", false)  //and enable
            return false;
        });
    });
</script>

div を使用できない場合は、前のテキストエリアを取得するprev('textarea')代わりに使用できます。siblings('textarea')

于 2012-05-10T04:51:34.217 に答える
3

ID 値を再利用しています - これは大したことではありません。txt1これらに ID を付ける場合は、リンクとtxt1テキストエリアを区別するために何かをする必要があります。以下のコードでは_link、リンクに接尾辞を追加しました。

<textarea id="txt1" disabled="true"></textarea>
<a class="edit" id="txt1_link">edit</a>

<textarea id="txt2" disabled="true"></textarea>
<a class="edit" id="txt2_link">edit</a>

その小さな変更により、テキストエリアの無効なプロパティを変更できるようになりました。

$(".edit").on("click", function(e){
  $( "#" + this.id.replace("_link", "") ).prop("disabled", false);
  e.preventDefault();
});

残念ながら、セレクターにはreplace()メソッドの使用が含まれています。リンクとテキストエリアの間の ID のあいまいさを取り除くと、これをなくすことができます。

デモ: http://jsbin.com/unebur/edit#javascript,html

于 2012-05-10T04:52:19.520 に答える
3

You are trying to remove disabled attribute of anchor tag by $(this). Try this.

<script type="text/javascript">

        $(document).ready(function() {

            $(".edit").click(function(){
                $("#"+$(this).attr("rel")).removeAttr("disabled");
            });

        });  

</script>

<textarea  id="txt1" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt1" >edit</a>
<textarea  id="txt2" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt2" >edit</a>
于 2012-05-10T04:53:45.427 に答える
1

こんにちは、以下のようにいくつかの変更を加えてください

 <script type="text/javascript"> 
      $(document).ready(function () {
          $('.txtAreas').attr('disabled', true);

          $("#txt3").click(function () {
            $('#txt1').removeAttr("disabled");
          });

          $("#txt4").click(function () {
             $('#txt2').removeAttr("disabled");
          });

     });
 </script>

    <textarea id="txt1" class="txtAreas"></textarea><a href="#" class="edit" id="txt3">edit</a>
    <textarea id="txt2" class="txtAreas"></textarea><a href="#" class="edit" id="txt4">edit</a>
于 2012-05-10T05:11:31.340 に答える
0

これは onclick ハンドラであるため、$(this) はクリックした要素 (<a>タグ) を指します。それは障害者を持っていません。dom ツリーを親ノード (テキストエリア) に移動し、そこで無効化された属性を削除する必要があります。

  $(this).parent().removeAttr("disabled");
于 2012-05-10T04:49:06.430 に答える