ブートストラップ・モーダルで入力タグにデータを渡す

Question

私はJ2EEプロジェクトで作業しており、私の人生を傷つけた問題がありました：vすでにブートストラップと一緒に作業していましたが、 、私は同じコードを使用すると、動作しません。

PS：スニペットでは、コードが正しいことを意味しますが、私のプロジェクトではそうではありません。どういう意味ですか。

$(".modal-link").click(function() { 
 
    $("#descr").attr('value', $(this).attr('descr')); 
 
    $($(this).attr('href')).modal('show'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div class='modal small fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> 
 
    <div class='modal-dialog'> 
 
    <div class='modal-content'> 
 
     <div class='modal-header'> 
 
     <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button> 
 
     <h3 id='myModalLabel'>Detail</h3> 
 
     </div> 
 
     <div class='modal-body' id="Details"> 
 
     <input id="descr" name="descr" value="" /> 
 
     </div> 
 
     <div class='modal-footer'> 
 
     <button class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Fermer</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <c:forEach items='${liste}' var='p'> 
 
    <div class="col-sm-6 col-md-4"> 
 
     <div class="media services-wrap wow fadeInDown"> 
 
     <div class="pull-left"> 
 

 
     </div> 
 
     <div class="media-body"> 
 
      <h3 class="media-heading">${p.getMarque()}</h3> 
 
      <p id="des">${p.getDescr()}</p> 
 
     </div> 
 
     <a href="#myModal" class="modal-link" var descr="${p.getDescr()}" role='button' data-toggle='modal'> 
 
      <i class="glyphicon glyphicon-eye-open">View</i> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </c:forEach> 
 
</div>

Answer 1

EDIT：私のポストを気にしません。あなたはすでに問題があなたのjavascriptやマークアップではないことを理解しました。

あなたのコードは正常に動作しているようですので、問題は明らかに他の場所です。 私はforeachループと変数を取り出し、記述をハードコードしました。モーダル内の入力には、押されたリンクに応じて異なる説明が入力されます。ところで、明示的に.show（）でモーダルを開く必要はありません。あなたは間違ってattr()メソッドを使用している

$(".modal-link").click(function() { 
 

 
    $("#descr").attr("value", $(this).attr('descr')); 
 
    //$($(this).attr('href')).modal('show'); 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 

 
<div class='modal small fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> 
 
    <div class='modal-dialog'> 
 
    <div class='modal-content'> 
 
     <div class='modal-header'> 
 
     <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button> 
 
     <h3 id='myModalLabel'>Detail</h3> 
 
     </div> 
 
     <div class='modal-body' id="Details"> 
 
     <input id="descr" name="descr" value="" /> 
 
     </div> 
 
     <div class='modal-footer'> 
 
     <button class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Fermer</button> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-sm-6 col-md-4"> 
 
    <div class="media services-wrap wow fadeInDown"> 
 
     <div class="pull-left"> 
 

 
     </div> 
 
     <div class="media-body"> 
 

 
     </div> 
 
     <a href="#myModal" class="modal-link" var descr="Description 1" role='button' data-toggle='modal'> 
 
     <i class="glyphicon glyphicon-eye-open">View</i> 
 
     </a> 
 
    </div> 
 
    </div> 
 
<div class="col-sm-6 col-md-4"> 
 
    <div class="media services-wrap wow fadeInDown"> 
 
     <div class="pull-left"> 
 

 
     </div> 
 
     <div class="media-body"> 
 

 
     </div> 
 
     <a href="#myModal" class="modal-link" var descr="Description 2" role='button' data-toggle='modal'> 
 
     <i class="glyphicon glyphicon-eye-open">View</i> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

。 prop()を使用してください。

$(".modal-link").click(function() { 
    $("#descr").prop('value', $(this).attr('descr')); 
    $($(this).attr('href')).modal('show'); 
}); 

続きを読むattr()を参照してください。

の属性について覚えておくべき最も重要な概念は、チェックされたプロパティに対応していないということです。 属性は実際にはdefaultCheckedプロパティに対応し、 はチェックボックスの初期値を設定するためにのみ使用してください。 チェックされた属性値は、 チェックボックスの状態では変更されません。したがって、 チェックボックスがオンになっているかどうかを判断するクロスブラウザ互換の方法は、

です。これは、選択や値などの他の動的属性についても同様です。

つまり、attr()メソッドは属性（この場合はvalue）のデフォルト値のみを変更します。入力valueを変更してattr()メソッドを使用して変更しようとすると、デフォルト値！=現在の値が設定されているため動作しません。現在の値を変更するには、prop()またはval()のメソッドを使用する必要があります。