如何在css選擇器上應用jQuery：在

Question

之前

這是我的場景，創建div與CSS並在右上方添加了0​​，之前添加了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事件。

注：只要確保你定義的CSS的span.close :-)

解決方案1：如果您可以編輯HTML。

$(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，其中包含與之前鏈接的X OR。將您的監聽器設置爲該div。

Answer 3

您可以使用CSS pointer-events屬性忽略父點擊，而不是僞元素。這樣，您可以在父級上擁有一個只由僞元素觸發的點擊偵聽器。

這將是一個問題，如果您需要允許父指針事件的其他原因當然是一個問題。

fiddle