ブートストラップモーダルリンクのデータ属性を取得

Question

私は多くの件名を見ましたが、私はまだ答えがありません。

状況：私はモーダルPOPIN

<a class="pointer" data-filtre='non' data-toggle="modal" data-target="#myModalAnnexeDe" > 
<a class="pointer" data-filtre="oui" data-toggle="modal" data-target="#myModalAnnexeDe" > 

を開くリンクを持っていると私は私のjs、アラートのは '未定義' は

$('#myModalAnnexeDe').on('show.bs.modal', function (event) { 
    var filtre=$(event.relatedTarget).attr('data-filtre'); 
    alert($(event.relatedTarget).attr("data-filtre")); 
    if(filtre == 'oui'){ 
     $('.notform').hide(); 
    } 
}); 

結果を持って

試してみます：

$(event.relatedTarget).attr('data-filtre') 
$(event.relatedTarget).data('filtre') 
$(event.relatedTarget).data($('a'),'filtre') 
$(event.relatedTarget).data(a,'filtre') 
$(event.relatedTarget).attr(filtre) 
$(event.relatedTarget).attr('filtre') 
$(event.relatedTarget).dataset.filtre 
$(this).attr("data-filtre") 
... 

とブートストラップのdocからshow.bs.modal & event.relatedTargetについて多分多くの他...

：

show.bs.modalこのイベントが発生し、直ちにshow instanceメソッドが呼び出されます。クリックによって発生した場合、クリックされた要素はイベントのrelatedTargetプロパティとして利用可能な です。

ありがとうございます。

Answer 1

あなたのコードだけでうまく動作します。ブートストラップバージョンとのjQueryバージョンの互換性を最初に確認してください。

参照目的のために、タグ補完やブートストラップモーダルとjqueryリンクのようなコードの単純な変更で作業コードを提供しました。

$('#myModalAnnexeDe').on('show.bs.modal', function (event) { 
 
    var filtre=$(event.relatedTarget).attr('data-filtre'); 
 
    alert($(event.relatedTarget).attr("data-filtre")); 
 
    if(filtre == 'oui'){ 
 
     $('.notform').hide(); 
 
    } 
 
});

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<a class="pointer" data-filtre='non' data-toggle="modal" data-target="#myModalAnnexeDe">non</a> 
 
<a class="pointer" data-filtre="oui" data-toggle="modal" data-target="#myModalAnnexeDe">oui</a> 
 

 
<!-- Modal --> 
 
<div id="myModalAnnexeDe" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

私は再び事の多くを試してみましたが、まだshow.bs.modalイベントでは動作しませんでした。

だから、僕は

$('.lienfiltre').on('click', function(){ 
    if($(this).attr('data-filtre') === 'oui'){ 
    $('.notform').hide(); 
    } 
}); 

を行なったし、ここではそれが働いています。 ty