ページにJavaScriptで生成されたHTMLコードがあります。同じHTMLコードの複数のセクション/インスタンスが生成され、ページに入力されています。各HTMLセクションのDIVの1つは、という名前のCSSクラスを使用して非表示になっていopenroleます。次のopenroleDIVから非表示の属性を削除し、DIVでを実行する必要がありますslideToggle()。1つのクラス要素をクリックすると、openroleクラスの次の要素を見つけようとしますが、運が悪いのでうまくいきません。
私はたくさんの選択肢を調べてテストしましたが、それでも運がありません。私は誰かが私をここの正しい方向に向けることができることを望んでいます。
$('#role_info').append(
'<li>' +
'<a href="javascript:void(0)">' +
'<i class="menu-icon fa fa-file-text-o bg-yellow"></i>' +
'<div class="menu-info">' +
'<h4 class="control-sidebar-subheading applicantinfo">' + papplicant + plusicon + '</h4>' +
'<p >' + prole + '</p>' +
'</div>' +
'</a>' +
'<div class="col-md-12 openrole">' +
'<div class="col-md-6">' +
'<p class="text-left standard-text">Selskapsinformasjon</p>' +
'<p id="company_address" class="text-left standard-text"><i class=" icon-padding fa fa-home"></i></p>' +
'<p id="company_phone" class="text-left standard-text"><i class=" icon-padding fa fa-phone"></i></p>' +
'<p id="company_email" class="text-left standard-text"><i class=" icon-padding fa fa-envelope"></i></p>' +
'</div>' +
'<div class="col-md-6">' +
'<p class="text-left standard-text">Kontaktperson</p>' +
'<p id="contact_name" class="text-left standard-text"><i class=" icon-padding fa fa-user"></i></p>' +
'<p id="contact_phone" class="text-left standard-text"><i class=" icon-padding fa fa-phone"></i></p>' +
'<p id="contact_email" class="text-left standard-text"><i class=" icon-padding fa fa-envelope"></i></p>' +
'<div>' +
'</div>' +
'</li>'
)
$(document).on('click', '.applicantinfo', function() {
$(this).closest('.openrole').slideToggle();
});.openrole {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="role_info" class="control-sidebar-menu">
</ul>コンソールにエラーメッセージは生成されません。HTMLの構造に基づいて正しいJavaScriptコードを書く方法を理解できないだけだと思います
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加