CSSセレクタでjQueryを適用する方法：

Question

divをCSSで作成し、右上にXをpseudo-classの前に追加しました。 javascriptの助けを借りてXをクリックしてこのdivを閉じるにはどうしたらいいですか？ビューの

CSS

.validation-summary-errors{ 
    position: absolute; 
    width: 260px; 
    padding: 20px; 
    box-sizing: border-box; 
    top: 50%; 
    left: 50%; 
    background-color: #fff; 
    text-align: center; 
    font-size: 14px; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    border-radius: 4px; 
    border: #000 solid 1px; 
    box-shadow: #232323 1px 1px 6px; 
} 

.validation-summary-errors:before { 
    display: block; 
    content: "X"; 
    position: absolute; 
    right: -15px; 
    top: -15px; 
    background-color: rgba(0, 0, 0, 0.85); 
    padding: 5px; 
    border-radius: 50%; 
    font-size: 16px; 
    color: #fff; 
    width: 29px; 
    box-sizing: border-box; 
} 

HTML（編集）

<div class="message-error"> 

          @validationSummary 

        </div> 

Answer 1

:beforeは擬似要素であり、DOMではアクセスできません。その代わりにspanまたはdivのスタイルを使用して、それをclickイベントとして使用してください。

注：HTMLを編集することができた場合は：ちょうどあなたがspan.close

:-)ソリューション1のためのCSSを定義していることを確認してください。

$(function() { 
 
    $('.close').click(function() { 
 
    $(this).parent().hide(); 
 
    }); 
 
});

.validation-summary-errors { 
 
    position: absolute; 
 
    width: 260px; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
    top: 50%; 
 
    left: 50%; 
 
    background-color: #fff; 
 
    text-align: center; 
 
    font-size: 14px; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    border-radius: 4px; 
 
    border: #000 solid 1px; 
 
    box-shadow: #232323 1px 1px 6px; 
 
} 
 
span.close { 
 
    cursor: pointer; 
 
    display: block; 
 
    content: "X"; 
 
    position: absolute; 
 
    right: -15px; 
 
    top: -15px; 
 
    background-color: rgba(0, 0, 0, 0.85); 
 
    padding: 5px; 
 
    border-radius: 50%; 
 
    font-size: 16px; 
 
    color: #fff; 
 
    width: 29px; 
 
    box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="validation-summary-errors"> 
 
    This specified email already exists 
 
    <span class="close">X</span> 
 
</div>

解決方法2： HTMLを動的に作成された場合。

$(function() { 
 
    $('.validation-summary-errors').append('<span class="close">X</span>'); 
 

 
    $('.validation-summary-errors').on('click', 'span.close', function() { 
 
    $(this).parent().hide(); 
 
    }); 
 
});

.validation-summary-errors { 
 
    position: absolute; 
 
    width: 260px; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
    top: 50%; 
 
    left: 50%; 
 
    background-color: #fff; 
 
    text-align: center; 
 
    font-size: 14px; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    border-radius: 4px; 
 
    border: #000 solid 1px; 
 
    box-shadow: #232323 1px 1px 6px; 
 
} 
 
span { 
 
    cursor: pointer; 
 
    display: block; 
 
    content: "X"; 
 
    position: absolute; 
 
    right: -15px; 
 
    top: -15px; 
 
    background-color: rgba(0, 0, 0, 0.85); 
 
    padding: 5px; 
 
    border-radius: 50%; 
 
    font-size: 16px; 
 
    color: #fff; 
 
    width: 29px; 
 
    box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="validation-summary-errors"> 
 
    This specified email already exists 
 
</div>

Answer 2

擬似要素はDOMではありません。 getComputedStyleメソッドのおかげでそれを読むことができますが、それを操作することはできません。

代わりに、divに絶対配置されたdivを作成します。これには、リンク先のクラスを持つX ORが含まれています。リスナーをそのdivに設定します。

Answer 3

あなたは親ではなく、疑似要素のクリックを無視するpointer-events CSS属性を使用することができます。そうすれば、擬似要素によってのみトリガーされる親のクリックリスナーを持つことができます。

これはもちろん、親の別の理由でポインタイベントを許可する必要がある場合には問題になります。

fiddle