요소 jQuery를 클릭하면 부모 양식 클래스 가져 오기

프랭크 M

HTML부터 시작하겠습니다.

<form class="send_units">
    <div class="buttons">
        <div id="button_attack" class="button">
            <div class="caption at">Attack!</div>
        </div>
        <div id="button_support" class="button">
            <div class="caption sp">Support!</div>
        </div>
    </div>
</form>

웹 사이트에있는 코드의 예입니다. 그 웹 사이트에 대한 스크립트를 만들었습니다. 해당 스크립트를 실행하기 위해 플레이어는 Tampermonkey를 사용할 수 있습니다. 웹 페이지에 코드를 추가 할뿐입니다. 참고 : HTML은 변경할 수 없습니다!

따라서 Attack!을 클릭하면 양식의 클래스 이름 (이 예에서는 send_units)을 가져와야합니다. 단추.

사용자가 클릭 한 요소를 파악하기 위해 Javascript를 사용합니다.

window.onclick = function(e){
    var clickedClass = e.target.className;
    var clickedID = e.target.id;

    if(clickedClass == 'caption at'){
        // Check if parent form has class send_units
    }
}

따라서 사용자가으로 버튼을 클릭 class = 'caption at'하면 양식 클래스가 send_units인지 확인해야합니다.

나는 수업을 얻기 위해 이것을 시도했다.

jQuery(e).find('form').parent().prop('class')

그러나 "정의되지 않음"을 반환합니다. (논리에 따르면 "form"요소를 사용하여 클릭 한 요소의 부모를 가져오고 해당 요소의 className을 가져옵니다.)

아무도 내가 여기서 뭘 잘못하고 있는지 설명해 줄 수 있습니까?

감사!

사운 티모

사용 .parents( selector )요소에 DOM까지 당신이 필요로하는 여러 레벨을 통과하기 위해 .hasClass( class )클래스의 존재를 테스트합니다.

window.onclick = function(e){
    var clickedClass = e.target.className;
    var clickedID = e.target.id;

    if(clickedClass == 'caption at'){
    	var is_send_units = $( e.target ).parents( 'form' ).hasClass( 'send_units' );
        console.log( is_send_units );
        if( is_send_units ){
          // do stuff
        }
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="send_units">
    <div class="buttons">
        <div id="button_attack" class="button">
            <div class="caption at">Attack!</div>
        </div>
        <div id="button_support" class="button">
            <div class="caption sp">Support!</div>
        </div>
    </div>
</form>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

자식 구성 요소를 클릭하면 부모 구성 요소 속성 가져 오기

부모 구성 요소를 클릭하면 자식 구성 요소에서 데이터 가져 오기

CKEDITOR-요소를 클릭하면 부모로부터 속성 가져 오기

jQuery-부모를 통해 클래스별로 요소 가져 오기

경로를 가져 오기 위해 클릭시 부모 li 요소의 텍스트를 결합하는 Jquery

ReactJ를 사용하여 부모에서 자식 요소로 클릭 된 ID 가져 오기

자식 요소를 클릭하면 맨 위로 스크롤 할 요소 가져 오기

버튼을 클릭하면 모든 텍스트 및 기타 구성 요소 요소를 양식 지우기

변수 양식 부분 클래스 선택기 jQuery 가져 오기

어떻게 부모 요소와 그 후는 셀레늄과 액션 클래스를 사용하여 자식 요소를 클릭 가져가 마우스로

이미지 요소를 클릭하면 SRC 가져 오기

jQuery를 사용하여 자식의 클래스를 기반으로 부모 요소에 클래스를 추가하는 방법

일부 클래스를 포함하거나 포함하지 않는 모든 요소 가져 오기

jQuery는 클릭 된 요소를 부모로 가져오고 그 자식을 얻습니다.

jQuery 클래스에 숫자가 포함 된 모든 요소 가져 오기

Angular : 자식 요소를 클릭 할 때 부모에 클래스를 추가하는 방법

JQuery-클래스별로 부모의 부모 가져 오기

PHP에 jQuery : 자식 요소가 2 개 이상인 경우 부모 요소에 선택기 클래스 추가

클래스를 가져 와서 모든 요소를 클릭

jQuery를 사용하여 클래스와 함께 모든 요소의 총액 가져 오기

부모로부터 자식 클래스 이름 가져 오기

부모를 클릭하면 자식 요소 트리거

jquery 부모 클래스의 인스턴스 가져 오기

e.querySelector가 부모를 클릭 할 때 자식 요소를 가져 오지 않음

jquery-each ()를 사용하여 클래스 요소의 위치 가져 오기

jQuery를 사용하여 요소의 클래스 목록 가져 오기

자식 클래스를 클릭하여 클래스의 부모 ID를 가져옵니다.

정적 자식 클래스에서 호출 부모 클래스 가져 오기

부모 클래스에서 자식 클래스 속성 가져 오기

TOP 리스트

  1. 1

    셀레늄의 모델 대화 상자에서 텍스트를 추출하는 방법은 무엇입니까?

  2. 2

    Blazor 0.9.0 및 ASP.NET Core 3 미리보기 4를 사용한 JWT 인증

  3. 3

    openCV python을 사용하여 텍스트 문서에서 워터 마크를 제거하는 방법은 무엇입니까?

  4. 4

    C # 16 진수 값 0x12는 잘못된 문자입니다.

  5. 5

    Excel : 합계가 N보다 크거나 같은 상위 값 찾기

  6. 6

    오류 : MSB4803 : MSBuild의 .NET Core 버전에서 "ResolveComReference"작업이 지원되지 않습니다.

  7. 7

    R에서 Excel로 내보낼 때 CET / CEST 시간 이동이 삭제됨

  8. 8

    node.js + postgres : "$ 1"또는 그 근처에서 구문 오류

  9. 9

    확대 후 하이 차트에서 Y 축이 잘못 정렬 됨

  10. 10

    EPPlus에서 행 높이를 설정할 때 이상한 동작

  11. 11

    Ionic 2 로더가 적시에 표시되지 않음

  12. 12

    MS Access 부분 일치 2 테이블

  13. 13

    EPPlus에서 병합 된 셀의 행 높이 자동 맞춤

  14. 14

    ExecuteNonQuery- 연결 속성이 초기화되지 않았습니다.

  15. 15

    ResponseEntity를 사용하고 InputStream이 닫히는 지 확인하는 적절한 스트리밍 방법

  16. 16

    PrematureCloseException : 연결이 너무 일찍 닫혔습니다.

  17. 17

    오류 : "const wchar_t *"유형의 인수가 "WCHAR *"유형의 매개 변수와 호환되지 않습니다.

  18. 18

    Java에서 이미지를 2 색으로 변환

  19. 19

    overflow-y를 사용할 때 스크롤 버벅 거림 줄이기 : scroll;

  20. 20

    Java에서 Apache POI를 사용하여 테이블 크기 및 간격을 단어로 설정하는 방법

  21. 21

    Android Kotlin은 다른 활동에서 함수를 호출합니다.

뜨겁다태그

보관